CSS兼容處理（二）

• 在IE6及如下版本的瀏覽器中定義小高度：

解決方法：#text { overflow：hidden; height：1px; font-size：0; line-height：0;}

具體詳解：IE6及如下瀏覽器沒法定義小高度的緣由是，默認有行高。

• 在IE6及如下版本瀏覽器中定義最小高度：

解決方法：#text { min-height：100px; _height：100px;}

注意：此時#text不能設置overflow爲hidden,不然模擬min-height失效。

• 解決按鈕兩邊增白：

解決方法：input,button { overflow：visible; }

• li兩個浮動以上出現空白：

解決方法：li { vertical-align：top}

除了top,還能夠設置text-top、middle、bottom、text-bottom,甚至特定的寬度和長度。

• IE6下不能識別僞元素：first-letter/：first-line的問題：

解決方法：

方法一：花括號前增長空格。

如：

p：first-letter { float：left; font-size：40px; font-weight：bold;}

p：first-line { color：#090;}

方法二：花括號前換行。

如：

p：first-letter

{float：left; font-size：40px;font-weight：bold;}

p：first-line

{color：#090;}

• 在IE8中僞元素：first-letter/：first-line中忽略！important規則：

解決方法：儘可能不要在：first-letter/：first-line中使用!important。

• 在IE6中同一條樣式中忽略！important規則：

解決方法：把同同樣式分開兩個規則來定義同一個樣式。

• li內部元素定義了display：block的內聯元素底部產生空白：

　　　　 解決方法：給li內聯元素加一個zoom：1.

               代碼示例：

BUG重現：

a,span { display：block;background：#ddd;}

<ul>

<li><a href="...">經常使用手冊</a></li>

<li><a href="...">經常使用手冊</a></li>

<li><a href="...">經常使用手冊</a></li>

<li><span>測試li內部元素定義了display：block的內聯元素底部產生空白</span></li>

</ul>

具體詳解：這個BUG出如今IE6及如下版本的瀏覽器。

• 未定義寬度的浮動或絕對定位會被內部設置了zoom：1撐開：

解決方法：

方法一：設置ul爲浮動元素

方法二：設置ul爲inline元素

方法三：設置ul的width

代碼示例：

BUG重現：

#test { zoom:1;  overflow:hidden; border: 1px solid #ddd; background:#eee; }

#test h1 { float:left;}

#test .nav {float:right; background:#aaa;}

#test .nav ul { zoom:1; overflow:hidden;margin:0; padding:0;list-style:none;}

#test .nav li {float:left;margin:0 5px;}

<div id="test">

<h1>Doyoe</h1>

<div class="nav">

<ul>

<li><a href="...">經常使用手冊</a></li>

<li><a href="...">經常使用手冊</a></li>

<li><a href="...">經常使用手冊</a></li>

</ul>

</div>

</div>

具體詳解：如上述代碼，IE6及如下版本瀏覽器的div,nav會被zoom:1的ul所撐開。

•  相對定位時父元素overflow屬性爲auto/hiddle時，失效：

解決方法：給div也設置一個相對定位。

相關代碼：

div { overflow:auto; width:260px; height:80px; border: 1px solid #ddd; }

p { position:relative; margin:0; }

<div>

<p>123456</p>

<p>123456</p>

</div>

具體詳解：如上述代碼，在IE7及更早瀏覽器下你會看到滾動條將沒法工做。在P標籤上加一個相對定位便可。

• 在谷歌瀏覽器中應用transition時頁面閃動：

解決方法：-webkit-transform-style：preserve-3d;或-webkit-backface-visibility:hidden;