IE7 дополнительные отступы / поля

Question

http://www.wilwaldon.com/crossing/page3.html

Если вы посмотрите на страницу в IE7, то между верхним абзацем и нижней областью прожектора будет безбожное пространство. Он отлично работает во всех других браузерах.

Если вы знаете какие-либо уловки или хаки, чтобы предотвратить это, я был бы очень признателен:)

Спасибо!

Answer 1

Причина, по которой вы получаете все это пространство, в том, что все верхние отступы и поля, которые вы накладываете на #spotlight сами. Вы, кажется, добавляете все это пространство, чтобы освободить место для плавания внутри него. Не делай этого. Сделайте, чтобы div содержал его float, добавив к нему overflow: hidden. Если это имеет нежелательные побочные эффекты, добавьте к нему класс clearfix, который уже есть в вашем CSS.

Причина, по которой вы видите все это пространство в IE7, заключается в том, что ширина #spotlight равна , вызывая макет . Это заставляет его уже содержать свои поплавки, толкая все это верхнее поле и отступая над ним.

Да, и не используйте несколько id="spotlightbox". Вот для чего классы . Идентификаторы должны быть уникальными. Вместо этого используйте class="spotlightbox".

Answer 2

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