Почему не переполнение: скрытая работа в IE6?

Question

Пожалуйста, взгляните на это:

http://jsfiddle.net/UQNJA/1/

Выглядит хорошо во всех современных браузерах и даже в IE7 / 8 и 9. Но в IE6 красные и розовые границы не являютсясодержащий <li>s, которые плавают влево.В любом случае, чтобы он работал?

PS Я бы никогда не поддержал IE6, но мой клиент требует этого: (

CSS:

@import "http://developer.yahoo.com/yui/build/reset/reset.css";
body { padding: 20px; }

#topnav { border: 4px solid red; }
#topnav ul { list-style-type: none; overflow: hidden; border: 4px solid pink; }
#topnav ul li { border-right: 1px solid green; float: left; }
#topnav ul li a { text-decoration: none; display: inline-block; height: 30px; line-height: 30px; padding: 0 20px; background: red; }
#topnav ul li a:hover { background: yellow; }

HTML:

<div id="topnav">
    <ul>
        <li><a href=""><span>home</span></a></li>
        <li><a href=""><span>about</span></a></li>        
        <li><a href=""><span>services</span></a></li>
        <li><a href=""><span>contact</span></a></li>
    </ul>
</div>

Answer 1

Если вам нужна поддержка IE6, вы должны понимать, haslayout .

Добавить zoom:1 к #topnav ul и дать ему haslayout и очистить значения.

Answer 2

У меня нет IE6 для тестирования, но при оформлении меню поместите все стили в тег A, а не LI (кроме float:left - переместите эту границу в A), сделайте A display:block, и это может исправить это.

И, как говорит Микко, очистите ваши поплавки:

<div id="topnav">
    <ul>
        <li><a href=""><span>home</span></a></li>
        <li><a href=""><span>about</span></a></li>        
        <li><a href=""><span>services</span></a></li>
        <li><a href=""><span>contact</span></a></li>
    </ul>
    <div style="clear:both"></div>
</div>

Answer 3

Я думаю, я нашел вашу проблему - вы используете IE6.Если бы IE6 был животным, его вытащили бы на улицу и застрелили.

Шутки в сторону: переполнение скрыто IS поддерживается IE6, что удивительно.

Ваша настоящая проблема в том, что UL не позиционируется относительноПопробуйте это:

ul {position:relative;}