瀏覽器兼容之旅第三站:IE常見Bug總結(jié)及修復(fù)方法—part1

Internet Explorer前端攻城師的的惡夢，十個(gè)有九個(gè)前端人員都認(rèn)為他為禍人間不淺，本應(yīng)早點(diǎn)滅掉他，可是上天有好生之德，因而沒有滅之，在此情況下，前端的攻程師們將就將就過吧。前面在《瀏覽器兼容之旅第一站:如何在頁面中創(chuàng)建IE條件注釋》和《瀏覽器兼容之旅第二站:各瀏覽器的Hack寫法讓瀏覽器達(dá)到一致的渲染效果》中了解了一些處理兼容的基本方法。那么這節(jié)開始瀏覽器兼容之旅的第三站:IE常見Bug，在本節(jié)中，您可以了解IE中常見的Bugs ，以及這些Bugs要如何去避免發(fā)生，或者發(fā)生了，我們將如何去解決他。大家有興趣嗎？有興趣的童鞋們就開始我們的旅行吧。

一、浮動(dòng)元素的雙倍Margin的Bug
浮動(dòng)元素的雙倍Margin的Bug是IE6以及其以下版本的一個(gè)經(jīng)典Bug了，觸發(fā)這個(gè)Bug的產(chǎn)生是給元素設(shè)置了float并且同時(shí)和float同一方向設(shè)置了margin值，此時(shí)在IE6(IE6以下版本我們飄過不理了)就會(huì)產(chǎn)一個(gè)雙倍margin值的Bug 。我們先來看一段代碼：

復(fù)制代碼代碼如下:
.demo {
background: #95cfef;
border: 1px solid #36f;
float: left;
height: 100px;
margin: 30px 0 0 30px;
width: 300px;
}

效果

修復(fù)方法
修復(fù)這個(gè)立王Bug的方法很簡單，只需要改變浮動(dòng)元素的顯示風(fēng)格，也就是說在浮動(dòng)元素中增加一個(gè)display:inline屬性，這樣就可以輕松的解決浮動(dòng)元素的雙倍Margin的Bug 。下面是修改后的代碼：

復(fù)制代碼代碼如下:
.demo {
background: #95cfef;
border: 1px solid #36f;
display: inline;
float: left;
height: 100px;
margin: 30px 0 0 30px;
width: 300px;
}

二、克服Box Model的Bug
Box Model的Bug常發(fā)生在同時(shí)給一個(gè)元素設(shè)置了寬度和高度的時(shí)候還設(shè)置了元素的padding或border值，此時(shí)將改變元素的真正大小。換個(gè)形像一點(diǎn)的例子，我們進(jìn)行行一個(gè)960px的布局，里面左邊欄是220px的寬度，主內(nèi)容是720px的寬度，他們之間是20px的間距，此時(shí)設(shè)計(jì)需要在左邊欄有一個(gè)10px左右內(nèi)距，如果我們按下面的代碼寫就會(huì)產(chǎn)生一個(gè)Bug 。
Html markup

復(fù)制代碼代碼如下:
div id="wrap"
div id="left" left/div
div id="content" main/div
/div

CSS Code

復(fù)制代碼代碼如下:
#wrap {
width: 960px;
background: #66CCFF
}
#left {
background: #FFCC99;
float: left;
padding: 0 10px;
width: 220px;
}
#right {
background: #9933CC;
float: right;
width: 720px;
}

此時(shí)div#left將改變了其實(shí)際的寬度，我們來看下面的一個(gè)圖，上圖是沒有padding值時(shí)的div#left，而下圖是有padding的div#left:

這個(gè)Bug在所有瀏覽器都將存在，因?yàn)樵赿iv#left中padding值改變了最初的寬度220px，那么要克服這個(gè)Bug也不難，只需要在div#left內(nèi)部增加一個(gè)div，并把padding值移入到這個(gè)新增加的div中就行了。

復(fù)制代碼代碼如下:
div id="wrap"
div id="left"
divleft/div
/div
div id="content" main/div
/div

CSS Code

復(fù)制代碼代碼如下:
#wrap {
width: 960px;
background: #66CCFF
}
#left {
background: #FFCC99;
float: left;
width: 220px;
}
#left div {
padding: 0 10px;
}
#right {
background: #9933CC;
float: right;
width: 720px;
}

此例只說加了padding值，如果在div中加了border值，我們同樣需要把border值也移入到內(nèi)部的div中，這樣就可以輕松克服Box Model帶來的Bug 。當(dāng)然不增加額外標(biāo)簽也有一種辦法可以解決，就是重新計(jì)算寬度，但這種方法是治標(biāo)不治本，小生不提倡使用這種方法。

三、設(shè)置元素的最小高度和最小寬度
在Web頁面設(shè)計(jì)中，有時(shí)為了達(dá)到元素的的統(tǒng)一渲染的風(fēng)格，我們有時(shí)需要使用min-height和min-width來控制元素的最小高度和最小寬度值。在別的瀏覽器都運(yùn)行正常，可唯獨(dú)這個(gè)IE6不識(shí)別人家。因此在使用min-height和min-width時(shí) ，為了達(dá)到效果一致，我們要針對IE6另作處理。其中min-height解決起來相當(dāng)簡單，但是min-width在IE6下要順利解決就有點(diǎn)麻煩（關(guān)于IE6下的min-width放到后面一起探討）這里我們主要來看min-height的解決辦法。
采用!important方法修復(fù)
第一種方法采用的是!important來解決，讓min-height在IE6下能正常工作，具體代碼如下：

復(fù)制代碼代碼如下:
.demo {
min-height: 100px;
height: auto !important;/*現(xiàn)代瀏覽器下，內(nèi)容高度超過100px時(shí)自動(dòng)獲得其高度*/
height: 100px;/*此值設(shè)置和min-height值一樣，因?yàn)镮E6下元素高度會(huì)根據(jù)內(nèi)容自己的高度而定，所以內(nèi)容高度低于min-height值時(shí)，為了達(dá)到min-height效果，需要給元素一個(gè)顯式的高度值*/
}

采用子選擇器方法來修復(fù)
大家都知道IE6是不支持子選擇器的，所以我們也可以使用這個(gè)方式來解決min-height在IE6下效果

復(fù)制代碼代碼如下:
.demo {
min-height: 100px;
height: 100px;
}
html body .demo {
height: auto;/*只有現(xiàn)代瀏覽器才能識(shí)別*/
}

四、塊元素水平居中
元素居中，大家都有碰到過，有時(shí)也有不少童鞋會(huì)問，怎么我的div元素在IE6下不能居中呢？其實(shí)這個(gè)Bug并不是什么時(shí)候都會(huì)發(fā)生的，據(jù)我查閱相關(guān)資料和多次測試，這個(gè)Bug只會(huì)發(fā)生在IE6怪癖模式下，知道問題出在什么地方，那解決起來不難了，最直接的辦法就是在你的頁面頭部記得加上Doctype 。有關(guān)于DOCTYPE聲明可以猛點(diǎn)這里查看。下面我們就針對IE6的怪癖模式來解決這樣的Bug 。
CSS Code

復(fù)制代碼代碼如下:
#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
}
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px auto;
}

產(chǎn)生的效果如圖所示

這主要是由于IE6的quirks模式不識(shí)別margin的auto屬性值，但還好，解決這個(gè)bug并不復(fù)雜。只需要在居中元素的父元素中加上text-align:center；然后在居中元素中加上text-align:left重新讓元素文本左對齊

復(fù)制代碼代碼如下:
#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
text-align: center;/*讓子元素在IE6的quirks模式實(shí)現(xiàn)水平居中*/
}
#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px auto;
text-align: left;/*重置文本對齊方式，讓文本左對齊*/
}

當(dāng)然元素居中問題是一個(gè)比較有意思的課題，如果你對這個(gè)感興趣也可以閱讀前面我整理的《CSS制作水平垂直居中對齊》一文，這樣你對元素的居中會(huì)有更深的了解。
五、列表li的樓梯Bug
li在IE6下呈樓梯狀的效果，也可以算是IE6的一個(gè)經(jīng)典Bug了吧。他通常發(fā)生在li中放置了一些元素內(nèi)容（比如說a）而且對其進(jìn)行浮動(dòng)，但li本身不浮動(dòng)，此時(shí)在IE下就會(huì)有樓梯上了，具體先看下面的代碼：
HTML Markup

復(fù)制代碼代碼如下:
ul
lia _fcksavedurl=""#"" /a/li
lia /a/li
lia /a/li
/ul

CSS Code

復(fù)制代碼代碼如下:
ul {
list-style: none;
}
ul li a {
display: block;
width: 130px;
height: 30px;
text-align: center;
color: #fff;
float: left;
background: #95CFEF;
border: solid 1px #36F;
margin: 30px 5px;
}

我們一起來看瀏覽器下的效果對比

解決這個(gè)Bug也有倆種方法，我們一起來看看
修復(fù)方法一：解決這個(gè)bug最簡單的方法，只需要在li元素中也加上一個(gè)浮動(dòng) ，所以你只需這樣做就能解決了

復(fù)制代碼代碼如下:
ul li {float: left;}

修復(fù)方法二：這個(gè)方法二也很簡單，就是在li元素上應(yīng)用display:inline

復(fù)制代碼代碼如下:
ul li {display: inline;}

六、li空白間距
這個(gè)Bug也是針對于li的，在IE下會(huì)無端增中l(wèi)i與li之間的垂直距離，別的先不說，先來看下面的代碼
HTML Markup

復(fù)制代碼代碼如下:
ul
lia Link 1 /a/li
lia Link 2 /a/li
lia Link 3 /a/li
/ul

CSS Code

復(fù)制代碼代碼如下:
ul {
margin:0;
padding:0;
list-style:none;
}
li a {
background: #95CFEF;
display: block;
}

同樣我們來看瀏覽器下的對比圖

雖然在IE6存在這樣的煩人的事情，不過還是值得慶幸的，我們只需在寫代碼時(shí)稍加注意，就可以輕松的避免這樣的Bug在你的頁面中出現(xiàn)
方法一：
最簡單的辦法就是給a標(biāo)簽顯式的定義一個(gè)寬度，用聲明寬度的方法來觸發(fā)IE瀏覽器的hasLayout ，當(dāng)然你也可以顯式的定義一個(gè)高度，同樣也可以解決，代碼如下：

復(fù)制代碼代碼如下:
li a {width: 200px;}

方法二：
方法二是在a標(biāo)簽上進(jìn)行浮動(dòng)，并且清除浮動(dòng)

復(fù)制代碼代碼如下:
li a {
display:block;
float: left;
clear: left;
}

方法三：
方法三也是比較簡單，只在li標(biāo)簽上加上一個(gè)行內(nèi)元素顯示

復(fù)制代碼代碼如下:
li {display: inline;}
li a {display:block;}

方法四：
這種方法是在每個(gè)列表li上設(shè)置一個(gè)底邊實(shí)線

復(fù)制代碼代碼如下:
ul li { border-bottom: 1px solid #666; }

這種方法問題是解決了，但生成了一個(gè)新的問題，就是li底部有一條實(shí)現(xiàn) ，如果實(shí)線顏色和頁面背景色不一致將會(huì)給你帶來視覺上的不同，所以最好底線顏色設(shè)置成你頁面相同的背景色，當(dāng)然你也可以嘗試下面的方法來解決：

復(fù)制代碼代碼如下:
ul li { border-bottom: 1px solid #ffffff; display:block; margin-bottom: -1px;}

七、IE6下無法設(shè)置元素的微高
這個(gè)Bug也很有意思，有時(shí)我們在Web頁面中使用div元素來模擬line或者說制作白色間距，顯顯在元素中定義了好少的高度，比如說2px的height，可是在IE6下，他始終都不以2px的高度見世，如下面的一段代碼

復(fù)制代碼代碼如下:
.demo {
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
}

接著我們來看瀏覽器的對比圖：

造成這要的Bug其實(shí)很簡單，因?yàn)樵贗E瀏覽器下，他會(huì)拒絕高度小于字號(hào)的設(shè)置，這樣解決起來就很簡單了，我們只需要把元素的字號(hào)設(shè)置為0，如果為了更安全，你最好加上line-height也為0 ，具體看下面的代碼

復(fù)制代碼代碼如下:
.demo {
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
font-size: 0;
line-height: 0;
margin: 30px 0;
}

上面是通過字體大小來解決，其實(shí)還有一種更簡單的方法，利用overflow:hidden將超過高度的部分直接切掉，從而達(dá)到2px的微高度設(shè)置，具體如下

復(fù)制代碼代碼如下:
.demo {
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
overflow: hidden;
}

八、overflow:auto與position:relative的碰撞
這個(gè)Bug也稱作距出邊界的Bug,而這個(gè)Bug 只出現(xiàn)在 IE6 和 IE7 中,有兩個(gè)塊元素,元素設(shè)置了 overflow: auto;子元素設(shè)置 position:relative 并且其高度大于父元素,在 IE6 和 IE7 中會(huì)產(chǎn)生一個(gè)比較難看的 Bug,也就是子元素塊不被隱藏會(huì)溢出父元素塊,而在 IE8 和 FF 還有 IE5.5 中又顯示是正常,我們先來看看這個(gè)例子的效果:
HTML Markup

復(fù)制代碼代碼如下:
div id="wrap"
div id="subDiv" /div
/div

CSS Code

復(fù)制代碼代碼如下:
#wrap {
border: 1px solid red;
height: 150px;
width: 200px;
background: orange;
overflow: auto;
}
#subDiv {
border: 1px dotted blue;
background: lime;
height: 200px;
width: 150px;
position: relative;
}

瀏覽器中的效果

要解決這個(gè)難看的Bug 我們只要在父元素中也設(shè)置一個(gè)position:relative;屬性,就會(huì)使 IE6 和 IE7 回復(fù)到正常狀態(tài) 。

復(fù)制代碼代碼如下:
#wrap {
border: 1px solid red;
height: 150px;
width: 200px;
background: orange;
overflow: auto;
position: relative;
}

這是一個(gè)overflow 在IE7~IE6 的bug,不單單只取值auto 會(huì)出現(xiàn)這個(gè)Bug,就是你設(shè)置overflow: hidden 也會(huì)出現(xiàn)這個(gè)Bug 。解決方法也是只要在父元素中加入一個(gè)position: relative;就 OK 了。

九、浮動(dòng)層錯(cuò)位
當(dāng)內(nèi)容超出外包容器定義的寬度時(shí)會(huì)導(dǎo)致浮動(dòng)層錯(cuò)位問題。在 Firefox、IE7、IE8 及其他標(biāo)準(zhǔn)瀏覽器里,超出的內(nèi)容僅僅只是超出邊緣;但在 IE6 中容器會(huì)忽視定義的 width 值,寬度會(huì)錯(cuò)誤地隨內(nèi) 容寬度增長而增長。如果在這個(gè)浮動(dòng)元素之后還跟著一個(gè) 浮動(dòng)元素,那么就會(huì)導(dǎo)致錯(cuò)位問題
HTML Markup:

復(fù)制代碼代碼如下:
div id="container"
div id="left" http://net.tutsplus.com//div
div id="right" /div
/div

CSS Code

復(fù)制代碼代碼如下:
#container{
background: #C2DFEF;
border: solid 1px #36F;
width: 365px;
margin: 30px;
padding: 5px;
overflow: auto;
}
#left,
#right{
background: #95CFEF;
border: solid 1px #36F;
width: 100px;
height: 150px;
margin: 30px;
padding: 10px;
float: left;
}

效果圖

解決這樣的bug沒有什么好方法，只能在元素中加上overflow:hidden，將多出來的內(nèi)容直接切掉，如：

復(fù)制代碼代碼如下:
#left { overflow: hidden; }

雖然可以使用 overflow:hidden;或 overflow:scroll;來修正,但 hidden 容易導(dǎo)致其他一些問題,scroll 會(huì) 破壞設(shè)計(jì) 。最好是使用固定布局或者是使用好寬度

十、IE6下躲貓貓
這個(gè)奇怪的 Bug 是 IE6 及其以下版本的,為什么起這樣的一個(gè)名稱,因?yàn)樵谀承┣闆r下文本看起來消失了,重新刷新隱藏的部分才會(huì)再度出現(xiàn) 。出現(xiàn)這個(gè) Bug 的條件是:一個(gè)撐破了容器浮動(dòng)元素后面緊跟著一些非浮動(dòng)元素,并且非浮動(dòng)元素中有一些定義了:hover 的鏈接,那么在 IE6 及其以下版中, 當(dāng)鏈接在懸浮狀態(tài)下就會(huì)觸發(fā)這個(gè)奇怪而又無耐的Bug 。

解決這個(gè)Bug最好的方法就是清除浮動(dòng)，因?yàn)樗怯捎诟?dòng)才產(chǎn)生的Bug 。有關(guān)于清除浮動(dòng)的方法，大家可以參考《Clear Float 》。
上面主要搜集了10種Bug,可以說這幾種都是經(jīng)典的Bug 。希望這幾種能給你今后的工作帶來方便，讓你在Bug還沒出現(xiàn)之前就避免他的發(fā)生。那么第三站我們也要說ByeBye了，如果你天天需要面對這個(gè)討厭的IE,小生建議你靜下心來細(xì)細(xì)讀完。對你會(huì)有所幫助的。如果你有更好的建議，也記得告訴我。或者在評論中給我留言。:)
更新一：
在上面的基礎(chǔ)上追加一個(gè)典型的IE6 bug: IE6中絕對定位、浮動(dòng)元素混用時(shí)的BUG 。一個(gè)內(nèi)容區(qū)塊，其中包含兩個(gè)浮動(dòng)的box，外加一個(gè)絕對定位的box，設(shè)置如下樣式時(shí)會(huì)發(fā)生IE6浮動(dòng)元素消失的BUG 。
HTML Code

復(fù)制代碼代碼如下:
div class="content"
div class="abs" abs/div
div class="main" main/div
div class="sub" sub/div
/div

CSS Code

復(fù)制代碼代碼如下:
*{ padding:0; margin:0;}
.content{width:600px;}
.abs{position:absolute; left:0; top:0; width:600px; height:120px; background:#1f3a87; }
.main{float:left; width:300px; height:200px; background:#f3f3f3; }
.sub{float:left;width:300px; height:200px; background:#bc2931;}

以上代碼在IE6下瀏覽會(huì)發(fā)現(xiàn)，絕對定位元素不見了。

解決方法：
給content加一個(gè)display:inline樣式可解決。
各元素的寬度mainsub2content 。給sub加一個(gè)margin-right:-3px樣式讓main和sub不要撐滿content可解決。
在main元素之前加一個(gè)空的div/div ，如div/divdiv class=main
給abs元素再嵌套一個(gè)div元素，如divdiv class=abs abs/div/div