不只做代碼的搬運工：學(xué)習(xí)、研究、測試、總結(jié)、再收藏
（一） IE6 下雙邊距問題
問題描述：
一個div盒子如果設(shè)置了margin，并且該div設(shè)置了float浮動，那么在IE6下便會產(chǎn)生雙邊距問題：如果設(shè)置 float:left 那么左邊距會是原來margin的兩倍；如果是float:right，那么右邊距會是原來margin的兩倍。
代碼如下：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
float:left;
margin:10px;
width:200px;
height:200px;
background:#696969;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
如下是各瀏覽器的效果圖（左側(cè)為chrome 中間為firefox 右側(cè)是IE6）：
解決方法：
在2004年以前，IE6這個雙邊距問題一直沒有得到一種很好的解決方法，普遍的做法是把邊距設(shè)置為目標(biāo)邊距的1/2，以錯對錯的方法去實現(xiàn)。2004年之后，有一個工程師發(fā)現(xiàn)了一個簡單的解決方法，到現(xiàn)在也是一直用這個方法來消除IE6雙邊距問題的。方法很簡單：只需要給id為box的這個div加上一條簡單的css代碼就夠了。
解決代碼：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
_display:inline;
float:left;
margin:10px;
width:200px;
height:200px;
background:#696969;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
如下是IE6的測試效果圖：
備注：
只需要加上" _display:inline; "就可以了。 因為在IE7以及IE7以上的IE版本中，這個雙邊距的bug已經(jīng)修正，前綴符號"_"只有IE6能夠識別，所以只需要讓IE6去設(shè)置這個屬性就足以。
（二） IE6 3像素bug問題
問題描述：
當(dāng)相鄰的兩個元素，一個是浮動的，另一個非浮動，那么在IE6 下面將會產(chǎn)生3像素bug。
問題代碼：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#left_box{
background:#1C86EE;
float:left;
height:100px;
width:100px;
}
#right_box{
background:#76EE00;
height:100px;
width:200px;
}
</style>
</head>
<body>
<div id="left_box"></div>
<div id="right_box"></div>
</body>
</html>
各瀏覽器效果圖：
注釋：
如上圖（上中下分別是firefox chrome IE6）：
在firefox和chrome（包括IE8 IE9已測試）中，由于<div id="left_box">浮動了，所以脫離了文本流，導(dǎo)致了<div id="right_box">這個元素從頭開始，所以藍(lán)色覆蓋在了綠色的上方。這是符合W3C標(biāo)準(zhǔn)的效果。
而在IE6則產(chǎn)生了著名的3像素bug，在相鄰的像素中間產(chǎn)生了3個像素的空隙。
在IE7中（已測試），這個bug被修復(fù)了，消除了中間的3像素空隙。但是卻不像firefox chrome那樣符合W3C標(biāo)準(zhǔn)。
解決方法：
在各個瀏覽器下使得相鄰的元素都是浮動的便可
代碼如下：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#left_box{
background:#1C86EE;
float:left;
height:100px;
width:100px;
}
#right_box{
background:#76EE00;
height:100px;
width:200px;
float:left; /*加上浮動便可*/
}
</style>
</head>
<body>
<div id="left_box"></div>
<div id="right_box"></div>
</body>
</html>
各瀏覽器效果圖：
總結(jié):
其實這個問題并不是特別的眼中以至于要用復(fù)雜的代碼去解決它，只要你寫出能符合W3C標(biāo)準(zhǔn)的效果代碼變可以無形中解決這個問題。這里提出只是因為讓大家更好的了解一下IE6下一些莫名其妙的事情罷了。
（三） IE6 不支持min-width屬性
問題描述：
min-width的使用在流式布局（fluid layout）中是非常常見的，當(dāng)用戶在改變窗口大小的時候，網(wǎng)頁內(nèi)容會隨之移動，直到窗口的大小確定位置。這個時候，min-屬性變起作用了?？梢酝ㄟ^限制min-屬性，讓頁面產(chǎn)生滾動條，進(jìn)而控制網(wǎng)頁內(nèi)容的位置。
但是非常遺憾的是，在IE6中，并不支持min-屬性，需要通過一些特定的辦法去解決這個問題。
在chrome firefox safari 和IE7+中，這個屬性已經(jīng)被支持了，可以直接使用。
問題代碼：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
background:#ccc;
min-width:500px;
}
</style>
</head>
<body>
<div id="box">
---------內(nèi)容--------
</div>
</body>
</html>
瀏覽器顯示效果(左邊chrome 中間firefox 右邊IE6)：
解決方法1：
使用IE（5-7）才支持的expression()表達(dá)式，可以很簡單的解決這個問題，但是這種方法是不符合W3C標(biāo)準(zhǔn)的。
實現(xiàn)代碼1：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
background:#ccc;
min-width:500px;
_width:expression(document.body.clientWidth<501 ? "500px" :"auto"); /*添加上這一句便可*/
}
</style>
</head>
<body>
<div id="box">
---------內(nèi)容--------
</div>
</body>
</html>
代碼解釋：
只需要在指定的<div>中加上代碼：_width:expression(width:expression(document.body.cilentWidth<501 ? "500px" :"auto");
由于只需要在IE6下進(jìn)行一些改變，所以加上" _ "符號，當(dāng)瀏覽器窗口寬度小于501px時，div寬度指定為500px，大于等于501px是，自動。
此處要注意的是：如果寫document.body.clientWidth<500會導(dǎo)致IE6奔潰，（兩處的大小相等會產(chǎn)生奔潰），所以此處用501或者502,；該<div id="box">不能指定margin或者padding，或者也會造成IE6奔潰。
解決方法2：
在<div id=box><div>中嵌套一個指定寬度的height：1px的<div>
實現(xiàn)代碼2：
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
#box{
background:#ccc;
min-width:500px;
}
.min-width-box{
width:500px;
font-size:0px; /*為空的div設(shè)置改css屬性*/
}
</style>
</head>
<body>
<div id="box">
<div class="min-width-box"></div>
---------內(nèi)容--------
</div>
</body>
</html>
代碼解釋：
在要指定min-width的div（box）中添加一個空的div（min-width-box）。對這個空的div進(jìn)行css樣式設(shè)置，寬度為需要設(shè)置的min-width；即width:500px;
由于在IE6下面,<div class="min-width-box"></div>是嵌套在<div id="box"></div>下面的，所以他的高度會和“------內(nèi)容------”這個的字體大小有關(guān)，為了不設(shè)置高度，把他的font-size:0px 設(shè)置為0px即可。 有一些教程上用height:1px而沒有使用font-size，經(jīng)過驗證，他的演示效果是會改變的。
瀏覽器的效果圖：（左邊chrome 中間firefox 右邊IE6）
上面兩種方法是實現(xiàn)的效果是一樣的，自此便完成了這個問題的解決。
（四） 更好的清除浮動
問題描述：
在你使用css的過程中，多多少少會遇到清除浮動這個問題。
在一個div容器里面，容器中含有一個浮動的div，在浮動元素后面還有一些塊元素。如果浮動的高度大于容器被非浮動元素?fù)伍_的高度，那么浮動元素就會超出容器。具體代碼如下。
問題代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
padding:0px;
margin:0px;
}
#container{
font-size:20px;
background-color:#eee;
border:solid 3px #ddd;
}
#float_box{
background-color:#fff;
border:solid 3px #bbb;
width:80px;
height:100px;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="float_box">floated element</div>
<h>the container</h>
</div>
</body>
</html>
各瀏覽器的效果圖：（左為chrome 中間為firefox 右邊為IE6）
注釋：
在上面的的瀏覽器效果圖中，能看到，float浮動元素并沒有把父級元素contianer撐開，而是非浮動元素把父級元素container撐開，這是因為float元素并不屬于文檔流而造成的。所以導(dǎo)致了子元素的高度超過了父級元素。
我們其實可以通過人為地設(shè)置container的高度而是float元素乖乖得留在container元素中，但是這樣設(shè)置就很死板，而且對流式布局等產(chǎn)生很多不方便的問題。
那么這時我們就需要清除浮動，讓container在不設(shè)置高度的情況下自動撐開。
解決方法：
在IE8+以及主流的瀏覽器中，都支持:after這個偽類，我們可以通過在float浮動元素后面增加一些內(nèi)容來撐開container，而在IE6 7中，我們則通過一些值的設(shè)置來觸發(fā)IE特有的haslayout屬性。
解決代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
padding:0px;
margin:0px;
}
.clearfix:after{
content:"";
height:0px;
visibility:hidden;
display:block;
clear:both;
}
* html .clearfix{
zoom:1;
}
#container{
font-size:20px;
background-color:#eee;
border:solid 3px #ddd;
}
#float_box{
background-color:#fff;
border:solid 3px #bbb;
width:80px;
height:100px;
float:left;
}
</style>
</head>
<body>
<div id="container" class="clearfix">
<div id="float_box">floated element</div>
<h>the container</h>
</div>
</body>
</html>
注釋：
給需要撐開的父級元素container添加上類class=clearfix，在css中添加以上新的css代碼即可。
content:" ";height:0px;visibility:hidden;這三句為了在container后面的內(nèi)容不可見，
display:block是用于替換掉默認(rèn)的display:inline，因為clear屬性不能用于行內(nèi)元素，
clear：both是清除浮動
在IE6 7中，利用zoom:1觸發(fā)haslayout屬性即可。
各瀏覽器效果圖：（左chrome 中間firefox 右邊IE6）
總結(jié)：
除了這種方法，網(wǎng)上還有很多其他的方法，其中一種比較簡單的是：
在float元素后面添加一個<div id="clearbox"></div>的div，然后給這個div設(shè)置clear：both；
現(xiàn)在很多人在使用這種方法，但是這種方法我是不推薦的，首先因為這種做法會無端得給dom增加一個元素，其次這種方法也會引起其他一些不必要的問題，比如說IE6下著名的peekaboo捉迷藏問題。
還有一些人用overflow來進(jìn)行清除，這些都是不推薦的。
（五） 元素背景色透明
（六） text-align的使用
問題描述
text-align可以使得 行內(nèi)元素 在 塊級元素 中居中
參照W3C標(biāo)準(zhǔn)的瀏覽器 塊級元素 在 塊級元素 中是無法居中的
問題代碼
<div id="parent" style="text-align:center">
<div id="child"></div>
</div>
這段代碼在主流標(biāo)準(zhǔn)瀏覽器中的效果如下：
但是在IE6 IE7 以及 IE8的混雜模式下面卻居中了
所以為了兼容蛋痛的IE6 7和IE8的混雜模式我們可以用下面的代碼實現(xiàn) 居中
<div id="parent" style="text-align:center">
<div id="child" style="width:50px;margin:0 auto"></div>
</div>
總結(jié)
我們可以使用margin-left：auto；margin-right：auto元素進(jìn)行居中，（要設(shè)定width）
由于IE6 7 8的混雜模式不支持這種居中方式，所以在parent中設(shè)置上text-align：center便可
通過這種方式便可以實現(xiàn)水平居中 這里text-align：center的兼容性是大家需要注意的
來自博主 https://me.csdn.net/speed_feng
瀏覽器兼容性經(jīng)典問題（一） IE6 下雙邊距問題
瀏覽器兼容性經(jīng)典問題（二） IE6 3像素bug問題
瀏覽器兼容性經(jīng)典問題（三） IE6 不支持min-width屬性
瀏覽器兼容性經(jīng)典問題（四） 更好的清除浮動
瀏覽器兼容性經(jīng)典問題（五） 元素背景色透明
瀏覽器兼容性經(jīng)典問題（六） text-align的使用
