Моделирование списков определения - IE clear:both ошибка
Я пытаюсь разработать список определения правильно. До сих пор у меня есть стиль, который я хотел в Firefox 3.5 и IE 8, но я не мог заставить IE6 и IE7 вести себя правильно... Я уже попробовал любой вид взлома и обмана, о котором я мог возможно думать.
Кажется, что "clear:both" на dt не работает в IE <=7...
Ниже "тестовая страница", которую я использую. Разметка списка определения создается нарочно: Я хочу протестировать различные сценарии, такие как повторные определения или освободить то.
Проверьте его в 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>
3 ответа
Попробуйте добавить позицию к своим элементам, absolute для dl и относительный для dt . Может сработать ..
Если у вас проблема в том, что некоторые элементы как бы "плавают вверх", то вот неприятный хак, который вы можете попробовать: поместите и следующим . Я знаю, что это звучит глупо, и, конечно, это сломанный HTML, но это единственное, что я нашел, что ставит "барьер" в разметке, чтобы не дать вещам уплыть вверх.
Вы пробовали исправить это?
Обычно я использую это исправление для всех своих проектов, поэтому я просто создал для него отдельную таблицу стилей:
/* 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">