CSS常見BUG

CSS Hack

IE條件註釋:
全部IE：<!--[if IE]> css code <![endif]-->
IE6以上：<!--[if gt IE 6]> css code <![endif]-->
IE6以上(含IE6)：<!--[if gte IE 6]> css code <![endif]-->
IE7如下：<!--[if lt IE 7]> css code <![endif]-->
IE7如下(含IE7)：<!--[if lte IE 7]> css code <![endif]-->

全部IE: \9
IE6: _
IE7: +
IE8和opera: \0
IE9: :root #test { border: 1px #000 solid\9; }

 1.如何在IE6及更早瀏覽器中定義小高度的容器？

方法：#test{overflow:hidden;height:1px;font-size:0;line-height:0;}

備註：IE6及更早瀏覽器之因此沒法直接定義較小高度的容器是由於默認會有行高

 2.如何解決IE6及更早瀏覽器浮動時產生雙倍邊距的BUG？

方法：#test{display:inline;}

備註：當在IE6及更早瀏覽器中出現浮動後margin值解析爲雙倍的狀況，設置該元素的display屬性爲inline便可。

 3.如何在IE6及更早瀏覽器下模擬min-height效果？

方法：#test{min-height:100px;_height:100px;}

備註：注意此時#test不能再設置overflow的值爲hidden，不然模擬min-height效果將失效

 4.如何解決按鈕在IE7及更早瀏覽器下隨着value增多兩邊留白也隨着增長的問題？

方法：#test{min-height:100px;_height:100px;}

 5.如何解決IE7及更早瀏覽器下當li中出現2個或以上的浮動時，li之間產生的空白間隙的BUG？

方法：li{vertical-align:top;}

備註：除了top值，還能夠設置爲text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值均可以

 6.如何解決IE6及更早瀏覽器下的3像素BUG？

方法：
.a{color:#f00;}
.main{width:950px;background:#eee;}
.content{float:left;width:750px;height:100px;background:#ccc;_margin-right:-3px;}
.aside{height:100px;background:#aaa;}

<div class="main">
	<div class="content">content</div>
	<div class="aside">aside</div>
</div>

備註：在IE6及更早瀏覽器下爲.content設置margin-right:-3px；也能夠設置.aside爲浮動

 7.如何解決IE6下的文本溢出BUG（江湖匪號：「諜影重重」或「一隻豬的故事」）？

BUG重現：
.test{zoom:1;overflow:hidden;width:500px;}
.box1{float:left;width:100px;}
.box2{float:right;width:400px;}

<div class="test">
	<div class="box1"></div>
	<!-- 註釋 -->
	<div class="box2">↓這就是多出來的那隻豬</div>
</div>

備註：
運行如上代碼，你會發現文字發生了溢出，在IE6下會多出一隻「豬」。形成此BUG的緣由多是多重混合的，如浮動，註釋，寬高定義等等。而且註釋條數越多，溢出的文本也會隨之增多。

列舉幾個解決方法： 
刪除box1和box2之間全部的註釋； 
不設置浮動； 
調整box1或box2的寬度，好比將box的寬度調整爲90px

8.如何解決IE6使用濾鏡PNG圖片透明後，容器內連接失效的問題？

方法：
div{width:300px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png');}
a{_position:relative;}

備註：解決方法是爲容器內的連接定義相對定位屬性position的值爲relative

 9.如何解決IE6沒法識別僞對象:first-letter/:first-line的問題？

方法1：
p:first-letter {float:left;font-size:40px;font-weight:bold;}
p:first-line {color:#090;}

備註：增長空格：在僞對象選擇符:first-letter/:first-line與包含規則的花括號"{"間增長空格。

方法2：
p:first-letter
{float:left;font-size:40px;font-weight:bold;}
p:first-line
{color:#090;}

備註：換行，將整個花括號"{"規則區域換行。細節參見E:first-letter和E:first-line選擇符

 10.如何解決IE8會忽略僞對象:first-letter/:first-line裏的!important規則的問題？

BUG重現：
p:first-letter {float:left;font-size:40px;font-weight:bold;color:#f00!important;color:#090;}

備註：如上代碼，在IE8下color定義都會失效，緣由就是由於有color使用了!important規則。鑑於此，請儘可能不要在:first-letter/:first-line裏使用!important規則。

 11.如何解決IE6會忽略同一條樣式體內的!important規則的問題？

BUG重現：
div{color:#f00!important;color:#000;}

備註：如上代碼，IE6及如下瀏覽器div的文本顏色爲#000，!important並無覆蓋後面的規則，也就是說!important被忽略了。解決方案是將該樣式拆分爲2條，細節參見!important規則

 12.如何解決IE6及更早瀏覽器下當li內部元素是定義了display:block的內聯元素時底部產生空白的問題？

BUG重現：
a,span{display:block;background:#ddd;}

<ul>
	<li><a href="">CSS參考手冊</a></li>
	<li><a href="">CSS探索之旅</a></li>
	<li><a href="">web前端實驗室</a></li>
	<li><span>測試li內部元素爲設置了display:block的內聯元素時底部產生空白</span></li>
</ul>

備註：如上代碼，IE6及更早瀏覽器每一個li內部的內聯元素底部都會產生空白。解決方案是給li內部的內聯元素再加上zoom:1

 13.如何解決IE6及更早瀏覽器下未定義寬度的浮動或絕對定位元素會被內部設置了zoom:1的塊元素撐開的問題？

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="">CSS參考手冊</a></li>
			<li><a href="">CSS探索之旅</a></li>
			<li><a href="">web前端實驗室</a></li>
		</ul>
	</div>
</div>

備註：
如上代碼，IE6及更早瀏覽器div.nav會被設置了zoom:1的ul給撐開。

列舉幾個解決方法： 
設置ul爲浮動元素； 
設置ul爲inline元素； 
設置ul的width

 14.如何解決IE7及更早瀏覽器下子元素相對定位時父元素overflow屬性的auto|hidden失效的問題？

BUG重現：
div{overflow:auto;width:260px;height:80px;border:1px solid #ddd;}
p{position:relative;margin:0;}

<div>
	<p>若是我是相對定位，個人父元素overflow屬性設置爲auto|hidden將失效。若是你使用的是IE及更早瀏覽器，你將能夠看到這個BUG</p>
	<p>若是我是相對定位，個人父元素overflow屬性設置爲auto|hidden將失效。若是你使用的是IE及更早瀏覽器，你將能夠看到這個BUG</p>
</div>

備註：如上代碼，在IE7及更早瀏覽器下你會看到div的滾動條將沒法工做。解決方案是給div也設置相對定位position:relative

 15.如何解決Chrome在應用transition時頁面閃動的問題？

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

備註：在Chrome下，使用過渡效果transition時有時會出現頁面閃動