看了這個題目，很多人肯定覺得有點太老土了，IE6都快到末路了，不過這個方法確實非常經典，我覺得很有必要記下一筆。 在制作水平菜單的時候，我們經常使用ul和li元素，利用float屬性讓這些元素在水平的位置上對齊，同時利用width:auto來保持每個菜單隨著內容的不同而變化寬度。在多數瀏覽器上，這個方法都很有效，只是除了IE6之外。 以下面的代碼為例： <style type="text/css"> ul { height: 30px; overflow: hidden; } ul li { float: left; width: auto; } ul li a { display: block; height: 30px; } </style> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> 如何避免這個問題呢？ Step 1 為IE6單獨定制樣式 為了解決問題，我們需要將li元素的寬度設置為0,但是不能改變其他瀏覽器中的寬度，為此我們必須要用一些小手段，只能在IE6下生效，有三種辦法： 1、hack 的手法。 #nav ul li { width:auto; _width:0; float:left; } 2、使用條件表達式 <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" /> <!--[if lt IE 7]> <link rel="stylesheet" href="/css/lt-ie7.css" type="text/css" media="screen" /> <![endif]--> 這樣，只有IE版本小于7是才會加載CSS。 3、使用CSS選擇器 #nav ul li { width: 0; float: left; } #nav ul > li { width: auto; } IE6會忽略選擇器，因為不支持，而其他瀏覽器則不會。 Step 2 Magic 最關鍵的讓li寬度自適應的辦法，是使用 white-space:nowrap ，如下： #nav ul li { width: 0; float: left; white-space: nowrap; } #nav ul > li { width: auto; } 怎么樣，很神奇吧。 參考資料： 1、Fix width:auto Floated Elements in IE 6

轉載于:https://www.cnblogs.com/cocowool/archive/2012/07/05/2578458.html

總結

以上是生活随笔為你收集整理的IE6下实现Width:auto的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。