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

Я пытаюсь правильно составить список определений. Пока у меня есть стиль, который я хотел в Firefox 3.5 и IE 8, но я не мог заставить IE6 и IE7 вести себя правильно ... Я уже пробовал любые хаки и обман, о которых я мог подумать.Списки определения стиля - IE clear: обе ошибки

Похоже, что «ясно: как» на ДТ не работает в IE < = 7 ...

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

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

Cheers !!!

<!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>

источник

2010-05-07 Andrea

Не могли бы вы поставить этот онлайн для нас, пожалуйста? – Tom

Это все там, действительно ... разметка и CSS. Однако есть ли онлайн-инструмент, позволяющий загружать небольшие фрагменты кода, которые вы рекомендуете? – Andrea

То, что вы пытаетесь сделать, это не список, а таблица. Используйте таблицу. –

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

источник

2010-05-07 12:03:02 Kyle

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

источник

2010-05-07 12:38:51 Pointy

Ум ... Да, это сработало бы. Однако я в порядке с хаками и обходным путем в css, но я не хочу испортить разметку страницы. :) – Andrea

@ Андреа хорошо, я сказал, что это неприятно. Я не смог найти альтернативы, поэтому я буду следить за вашим вопросом здесь! – Pointy

Вы пробовали исправить ошибку?

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

/* 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 и включить его в разметке (или вы можете просто включить его в вашей таблице стилей). Затем, чтобы использовать, просто добавьте ясный класс в родительский контейнер ваших плавающих элементов, в этом случае ваш dl.

например.

<dl class"clear">

источник

2010-05-12 02:15:39 corroded

К сожалению, здесь проблема другая ... dt и dd не могут очистить их как они должны ... проблема не в содержащем dl, а на элементах внутри ... – Andrea

О, да, означает, что вам действительно нужно придерживаться этой разметки? Я думаю, что это по-прежнему хорошая (и смысловая) разметка, если вы идете вложенным способом списка: dt имеет не более одного dd. если dt имеет много определений, используйте неупорядоченный список, чтобы перечислить их все. – corroded

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

<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>

источник

2010-07-26 12:21:07 lupalz

Я думаю, что лучшее решение здесь касается изменения структуры 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>

источник

2010-11-09 11:23:55 bluantinoo

Это работает в IE7, не протестированном в IE6. При необходимости отрегулируйте. Adapted from here.

<!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>

источник

2010-11-13 00:09:29 juddlyon

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

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

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

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

источник

2011-06-27 06:38:32 pnomolos

Я бы сказал, что весь код сломан. Как сказал @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>

источник

2016-05-18 07:45:25 tomasz86

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

ответ

Смежные вопросы