Bugs And Fixed

Bugs及解決方案列表(以下实例默认运行环境都为Standard mode):

  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增多兩邊留白也隨著增加的問題?

    方法:

    input,button{overflow:visible;}
  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-letterE: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="?css3/">CSS參考手冊</a></li>
    
    	<li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
    
    	<li><a href="http://demo.doyoe.com/">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="?css3/">CSS參考手冊</a></li>
    
    			<li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
    
    			<li><a href="http://demo.doyoe.com/">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時有時會出現頁面閃動