Списки определений стилей - IE ясно: обе ошибки - PullRequest
Новая
       9

Списки определений стилей - IE ясно: обе ошибки

6 голосов
/ 07 мая 2010

Я пытаюсь правильно оформить список определений. До сих пор у меня был стиль, который я хотел в Firefox 3.5 и IE 8, но я не мог заставить IE6 и IE7 вести себя должным образом ... Я уже пробовал любые способы взлома и обмана, о которых я мог подумать. 1001 *

Похоже, что "clear: both" на dt не работает в IE <= 7 ... </p>

Ниже находится "тестовая страница", которую я использую. Разметка списка определений построена специально: я хочу протестировать различные сценарии, например, несколько определений или пустой.

Проверьте его в Firefox> 3.5, чтобы увидеть, как он должен выглядеть.

Ура !!! 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
 <style type="text/css">
  body { font-family: Arial; font-size: 62.5%; }
  * { margin: 0; padding: 0; }
  #main { font-size: 1.4em; }
  dt { font-weight: bold; }
  hr { clear: both; }

  dl.aligned { width: 300px; }
  .aligned dt { clear: both; float: left; margin: 0 0 0.5em 0; width: 100px; }
  .aligned dd { clear: right; float: right; margin: 0 0 0.5em 10px; width: 190px; }

 </style>
  </head>
  <body>
 <div id="main">
  <dl class="aligned">
   <dt>First title</dt>
   <dd>1.1 definition</dd>
   <dd>1.2 definition - very long to test wrapping</dd>
   <dd>1.3 definition</dd>
   <dt>Second title</dt>
   <dd></dd>
   <dd></dd>
   <dt>Third title</dt>
   <dd>3.0 definition</dd>
   <dt>Fourth title - very long to test wrapping</dt>
   <dt>Fifth title</dt>
   <dt>Sixth title</dt>
   <dd>6.0 definition</dd>

  </dl>
 </div>
  </body>
</html>

Ответы [ 8 ]

1 голос
/ 12 мая 2010

Вы пробовали исправить это?

Обычно я использую это исправление для всех своих проектов, поэтому я просто создал для него отдельную таблицу стилей: 

/* float clearing for IE6 */
* html .clear {
  height: 1%;
  overflow: visible; }

/* float clearing for IE7 */
*+html .clear {
  min-height: 1%; }

/* float clearing for everyone else */
.clear:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden; }

сохраните это как clear.css и включите его в разметку (или вы можете просто включить его в таблицу стилей). Затем для использования просто добавьте класс clear в родительский контейнер ваших плавающих элементов, в данном случае, вашего dl.

, например 

<dl class"clear">
1 голос
/ 27 июня 2011

Для тех, кто сталкивался с этим в поисках решения, у меня есть кое-что, что работает для одиночных пар <dt> / <dd> (при условии, что ширина двух элементов составляет полную ширину <dl>).

Используйте css, упомянутый выше, для всех браузеров, кроме IE 7. Для IE7 используйте что-то вроде следующего: 

.ie7 #home .news dt,
.ie7 #home .news dd {
    float: none;
    display: inline;
    zoom: 1;
    vertical-align: top;
}

Примечание : я использую условные комментарии дляНацеливайтесь на IE7 таким образом. Используйте любой ваш любимый метод нацеливания на IE7, чтобы отправить ему эти правила. Я знаю, что это ужасно развалится, если вы добавите несколько элементов <dd>, поэтому я отметил, что он работает только для парэлементов. *

0 голосов
/ 18 мая 2016

Я бы сказал, что весь код не работает. Как сказано в комментарии @NickPyett, его следует отформатировать в виде таблицы.

Хакинг не требуется, и все отображается по желанию. 

th {
  text-align: left;
}
<table>
  <tr>
    <th scope="rowgroup" rowspan="3">First title</th>
    <td>1.1 definition</td>
  </tr>
  <tr>
    <td>1.2 definition - very long to test wrapping</td>
  </tr>
  <tr>
    <td>1.3 definition</td>
  </tr>
  <tr>
    <th scope="row">Second title</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Third title</th>
    <td>3.0 definition</td>
  </tr>
  <tr>
    <th scope="row">Fourth title - very long to test wrapping</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Fifth title</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Sixth title</th>
    <td>6.0 definition</td>
  </tr>
</table>
0 голосов
/ 13 ноября 2010

Это работает в IE7, не протестировано в IE6. Отрегулируйте по мере необходимости. Адаптировано отсюда. 

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
<style type="text/css">
  body { font-family: Arial; font-size: 62.5%; }
  * { margin: 0; padding: 0; }
  #main { font-size: 1.4em; }
  dt { font-weight: bold; }
  hr { clear: both; }

  dl.aligned { width: 300px; }
  .aligned dt { clear: both; float: left; margin: 0 0 0.5em 0; width: 100px; }
  .aligned dd { clear: right; float: right; margin: 0 0 0.5em 10px; width: 190px; }

 </style>

 <!--[if lt IE 8]>

  <style type="text/css">
    .aligned dt { float: left; clear: left; margin: 0 0 0.5em 0; width: 100px; }
    .aligned dd { clear: none; float: none; margin: 0 0 0 100px; width: 190px; }
    .aligned dt:after { content: ":"; } 
  </style>

 <![endif]--> 

  </head>
  <body>
 <div id="main">
  <dl class="aligned">
   <dt>First title</dt>
   <dd>1.1 definition</dd>
   <dd>1.2 definition - very long to test wrapping</dd>
   <dd>1.3 definition</dd>
   <dt>Second title</dt>
   <dd></dd>
   <dd></dd>
   <dt>Third title</dt>
   <dd>3.0 definition</dd>
   <dt>Fourth title - very long to test wrapping</dt>
   <dt>Fifth title</dt>
   <dt>Sixth title</dt>
   <dd>6.0 definition</dd>

  </dl>
 </div>
  </body>
</html>
0 голосов
/ 09 ноября 2010

Я думаю, что лучшее решение здесь об изменении структуры HTML. Если вы делаете разные dl.aligned блоки - вместо одного - довольно просто добиться того, что вы хотите. 

<dl>
 <dt></dt>
 <dd></dd>
 <dd></dd>
</dl>

<dl>
 <dt></dt>
 <dd></dd>
 <dd></dd>
</dl>

<dl>
 <dt></dt>
 <dd></dd>
</dl>
0 голосов
/ 26 июля 2010

Это должно работать, я добавил несколько цветов фона, чтобы вы могли видеть, что происходит. Вам нужно будет добавить класс к каждому первому дд и поиграть с различной «шириной», чтобы соответствовать вашему дизайну. 

    <style type="text/css">
  body { font-family: Arial; font-size: 62.5%; }
  * { margin: 0; padding: 0; }
  #main { font-size: 1.4em; }
  dt { font-weight: bold; }
  hr { clear: both; }

  dl.aligned { background-color:orange;width: 400px; }
  .aligned dt {background-color:grey;clear:both;float: left; margin: 0 0 0.5em 0; width:150px}
  .aligned dd {background-color:olive;clear:left;float: left; margin: 0 0 0.5em 150px; width: 190px; }
.aligned dd.first {clear: none;margin-left:0}

 </style>
  </head>
  <body>
 <div id="main">
  <dl class="aligned">
   <dt>First title</dt>
   <dd class="first">1.1 definition</dd>
   <dd>1.2 definition - very long to test wrapping</dd>
   <dd>1.3 definition</dd>
   <dt>Second title</dt>
   <dd></dd>
   <dd></dd>
   <dt>Third title</dt>
   <dd class="first">3.0 definition</dd>
   <dt>Fourth title - very long to test wrapping</dt>
   <dt>Fifth title</dt>
   <dt>Sixth title</dt>
   <dd class="first">6.0 definition</dd>

  </dl>
 </div>
  </body>
0 голосов
/ 07 мая 2010

Если проблема в том, что некоторые элементы кажутся «всплывающими вверх», то вот неприятный взлом, который вы можете попробовать: положить <div> с «clear: both» между закрытием <dd> иследующий <dt>.Я знаю, что это звучит глупо, и, конечно, это неработающий HTML, но это единственное, что я обнаружил, это создает «барьер» в разметке, чтобы не допустить всплывания материала вверх.

0 голосов
/ 07 мая 2010

Попробуйте добавить position к вашим элементам, absolute для dl и relative для dt. Это может сработать ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...