Почему этот простой плавающий список определений не работает в IE7, и как мне это исправить?

Question

Это очень просто dl.

HTML

<dl id="photo-attributes">
<dt>Edition</dt>
<dd>200</dd>
<dt>Ratio</dt>
<dd>3:1</dd>
<dt>Location</dt>
<dd>Great ocean road, Victoria</dd>
<dt>FStop</dt>
<dd>F-32</dd>
<dt>Exposure</dt>
<dd>3 minutes 40 seconds</dd>
</dl>

CSS

#photo-attributes {
  margin: 1em 0;
  overflow: hidden;
}

#photo-attributes dt {
  width: 10em;
  float: left;
  clear: left;
  font-weight: bold;
}

#photo-attributes dd {
  float: left;
}

Работает, как и ожидалось, во всем, кроме IE7. dd с плавающей точкой влево на одной строке. Я не могу вспомнить, что это за ошибка в IE7.

Как мне это исправить? Спасибо

Answer 1

IE7-специфическая разметка (примечание удалено и триггер hasLayout):

#photo-attributes dd {
    zoom: 1;
}

Если вы удалите float для всех браузеров и не вызовете hasLayout для IE7, вы можете не получить ожидаемого результата, если dd окажется с разрывом строки / "выше", чем dt слева от нее.

Answer 2

Списки определений иногда очень сложно выяснить, но я написал блог об очень простом исправлении, которое устраняет поплавки и работает в большинстве распространенных браузеров.Он включает использование стиля display: inline-block, который заставляет элемент вести себя как встроенный элемент, но заставляет его иметь стиль на уровне блока.

http://www.qasimalyas.co.uk/definition-lists-making-them-behave/

Answer 3

Это связано с ошибкой haslayout . Но, в конце концов, dd не нужно оставлять влево. Удалить его.

Answer 4

Я делал что-то похожее, и приведенные выше ответы не работали.В итоге я определил как display: block;плавать: нет;и, похоже, отлично работает для IE7.