Проблема очистки с плавающей точкой в ​​IE6 - они очищаются сами! - PullRequest
Новая
       4

Проблема очистки с плавающей точкой в ​​IE6 - они очищаются сами!

1 голос
/ 18 сентября 2010

Я создаю страницу, в которой есть список UL с плавающими элементами для создания 2 столбцов. Смотри http://epraxadev.com/valencia/food_truck_festival/index2.php

Отлично работает в Firefox, Chrome, Safari, IE8 и IE7. Единственная проблема в IE6. В IE6 вместо элементов списка, размещаемых в аккуратных 2-рядных столбцах, с миниатюрой, смещенной влево, и описанием миниатюры, смещенной вправо, описание каким-то волшебным образом очищает всплывающую миниатюру. Странно!

Вот разметка 

<ul id="theTrucks">
<li>
    <a class="thumb"><img src="images/trucks/dim-sum.png" width="78" height="79" alt="Dim Sum" /></a>
    <div class="details">
        <p>The Dim Sum Truck brings ample amounts of steamed shu mai and har gow dumplings, baked BBQ pork buns and more.</p>
        <ul>
            <li><a href="#" target="_blank">Website &raquo;</a></li>
            <li><a href="#" target="_blank">Facebook &raquo;</a></li>
            <li><a href="#" target="_blank">Twitter &raquo;</a></li>
        </ul>
    </div>
</li>

<li>
    <a class="thumb"><img src="images/trucks/border-grill.png" width="78" height="79" alt="Border Grill" /></a>
    <div>
        <p>The Border Grill Truck serves gourmet tacos, quesadillas, ceviches and more.</p>
        <ul>
            <li><a href="#" target="_blank">Website &raquo;</a></li>
            <li><a href="#" target="_blank">Facebook &raquo;</a></li>
            <li><a href="#" target="_blank">Twitter &raquo;</a></li>
        </ul>
    </div>
</li>

<li class="clear"></li>

...repeats

А вот и CSS: 

<style type="text/css">
ul#theTrucks    { margin:1em 0 0; padding:0; }
ul#theTrucks li { width:320px; float:left; display:inline; margin-right:11px; list-style:none; overflow:hidden; }
ul#theTrucks li a.thumb { float:left; display:inline; width:78px !important; height:79px; margin:0; }
ul#theTrucks li div { width:230px; float:left; display:inline; padding:0; margin:0 0 0 11px; }
ul#theTrucks li div p   { margin-bottom:0.5em; font-size:11px; line-height:1.2; }
ul#theTrucks li div ul  { padding:0; margin:0; list-style:none; font-size:11px; line-height:1.2; }
ul#theTrucks li ul li   { list-style-type:none; margin:0; }

ul#theTrucks li.clear { width:100%; float:none; display:block; margin:0; height:50px; clear:both; }
</style>

<!--[if lte IE 6]>
<style type="text/css">
ul#theTrucks li div { width:100px; clear:none; }
</style>
<![endif]-->

Обратите внимание на специфичный для IE6 стиль, который делает div только 100px, так что я знаю, что это не потому, что содержащий li (в 320px) слишком мал, чтобы содержать его.

Ответы [ 2 ]

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

http://www.thedimsumtruck.com/Index/Home.html чертовски беспорядок!Вы можете едва прокрутить страницу в IE8.

0 голосов
/ 18 сентября 2010

Разобрался с проблемой. Внутренние теги <li> неупорядоченного списка наследовали ширину контейнера <li> тегов, которая составляла 320 пикселей. Я установил внутренние <li> s так: 

ul#theTrucks li ul li   { width:230px; margin:0; }

и та да! Больше никаких проблем с выравниванием = D

...