IE 7 плавал div авто-очистка следующего элемента? - PullRequest
1 голос
/ 09 июня 2010

У меня проблемы со следующим примером.

Справочная информация: Сначала у меня есть элемент, плавающий справа, с выводом изображения внутри него. Затем у меня есть элемент с другим содержанием внутри него.

В FF и IE 8, как и ожидалось, div .images смещался вправо, дисплеи смещались вправо, красиво перемещая содержимое внутри .product-body влево.

Проблема: Но если смотреть в режиме совместимости с IE 7, div .product-body очищается под div .images, и, таким образом, div .images не падает должным образом вправо, как ожидалось. ЭТО делает это независимо от того, ясно ли у меня: нет; на .broduct-body div.

Пожалуйста, посмотрите пример на www.hotelmarketingbudget.com. Посмотрите на исходный код элемента div # content-body, чтобы увидеть эти элементы. Не стесняйтесь использовать панель инструментов Firebug или IE Dev или еще что-нибудь, чтобы проверить это.

Соответствующий CSS:

#content-body{
 width:auto;
 height:auto;
 position:relative;
 margin:0 auto; 
}

.product-group .images {
 float:right;
 width:auto;
 height:auto;
 position:relative;
 margin:0 auto;
 margin-left:15px;
}

.product-group .product-body {
 width:auto;
 height:auto;
 position:relative;
 margin:0 auto;
}

Я уже часами пытался выяснить, как исправить это - поиск в Google, читая другие потоки здесь по stackoverflow, но, увы, я не могу найти какие-либо решения, и трудно понять, какие слова даже искать. Я действительно надеюсь, что это всего лишь бред с моей стороны.

Буду признателен за любые советы, идеи или вопросы!

1 Ответ

0 голосов
/ 09 июня 2010

Попробуйте назначить фиксированную ширину плавающему контенту (как в width:250px). Я считаю, что старые версии IE не очень хорошо обрабатывают плавающие объекты, если они не имеют фиксированной ширины.

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

http://www.satzansatz.de/cssd/onhavinglayout.html

Если вы не хотите назначать фиксированную ширину, вы можете попробовать другие хаки hasLayout: min-width: 1% и zoom: 1.

...