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;
CSS兼容處理（二）