看了這個題目，很多人肯定覺得有點太老土了，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;
}
怎么樣，很神奇吧。
參考資料：