這兩天做頁面模板，有些li使用了float:left，結果發現行高在IE6下與其他瀏覽器不同了，總要高出一些。查了一下，發現這個是因為IE下特有的hasLayout造成的，很多的IE下的CSS BUG都其有關。
代碼如下：
<style>
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
ul li {
width:100px;
height:100px;
float:left;
margin-right:10px;
background-color:#99cc00;
}
</style>
<ul>
<li>西部e網-IT資訊</li>
<li>西部e網-軟件教程</li>
</ul>
如何解決這個問題呢？其實很簡單，而且也有多種方法：
方法1：使用zoom:1
折疊HTML/XML Code復制內容到剪貼板
- <style>
- ul {
- margin:0;
- padding:10px;
- list-style:none;
- background-color:#006699;
- zoom:1;
- }
- ul li {
- width:100px;
- height:100px;
- float:left;
- margin-right:10px;
- background-color:#99cc00;
- }
- </style>
- <ul>
- <li>西部e網-IT資訊</li>
- <li>西部e網-軟件教程</li>
- </ul>
在ul的樣式表中增加了zoom:1就ok了。
方法2：
HTML/XML Code復制內容到剪貼板
- <style>
- ul {
- margin:0;
- padding:10px;
- list-style:none;
- background-color:#006699;
- zoom:1;
- }
- * html ul {
- height:1%;
- }
- ul li {
- width:100px;
- height:100px;
- float:left;
- margin-right:10px;
- background-color:#99cc00;
- }
- </style>
- <ul>
- <li>西部e網-IT資訊</li>
- <li>西部e網-軟件教程</li>
- </ul>
小知識：什么是haslayout？
haslayout 是Windows Internet Explorer渲染引擎的一個內部組成部分。在InternetExplorer中，一個元素要么自己對自身的內容進行計算大小和組織，要么依賴于父元素來計算尺寸和組織內容。為了調節這兩個不同的概念，渲染引擎采用了 hasLayout 的屬性，屬性值可以為true或false。當一個元素的 hasLayout屬性值為true時，我們說這個元素有一個布局（layout）。