Плавающий + очищенный элемент не влияет на следующие плавающие элементы в IE7 - есть ли обходной путь? - PullRequest
1 голос
/ 21 октября 2010

Я пытаюсь оформить список определений так, чтобы теги dt начинали новые строки, и за ними могло следовать любое количество элементов dd в той же строке.В современных браузерах это так же просто, как

dt {
    float:left;
    clear:left;
}
dd {
    float:left;
}

В IE7, однако, если очищающий элемент имеет float, последующие операции float не затрагиваются.( пример ) Есть ли обходной путь для этой ошибки?Я оглядывался по сторонам, но ни одно из обычно предлагаемых решений не кажется подходящим:

  • , поскольку это список определений, я не могу обернуть элементы в одинаковые строки в div.
  • Я не хочу использовать невидимый неперемещаемый очищающий элемент - это должен быть dt или dd, и весь смысл в использовании списка определения вместо таблицы или span - br суп должен иметь семантическую разметку, которая была бы испорчена чисто презентационными dt / dd элементами.
  • , насколько я вижу, подходы, основанные на запуске hasLayout (таким образом, запускает поведение встроенного блока), например , это не работает, когда число элементов в строке не фиксировано.(Кроме того, я бы предпочел не беспокоиться об удалении пробелов.)
  • Я не мог заставить это решение работать с dl вместо ul;Даже установка display:list-item не помогла.

Есть ли другой способ заставить IE7 имитировать стандартное поведение с плавающей точкой?

1 Ответ

0 голосов
/ 21 октября 2010

Попробуйте использовать встроенный блок вместо числа с плавающей запятой.

dl { 
    line-height:1.2em; 
    padding-left:1em; 
} 
dt { 
    display:block; 
    margin:0 0 -1.2em -1em; 
} 

dd { 
    display:inline-block; 
    display:inline !ie; 
    margin-left:1em; 
} 

Кредит смерти, придумавшей это.

...