程序員最討厭的就是反復(fù)的修復(fù)查找BUG吞滞，佑菩，，裁赠，殿漠，特別是萬(wàn)惡的IE6，不過(guò)沒(méi)辦法佩捞，改修復(fù)還是修復(fù)處理绞幌，誰(shuí)讓我們干的是這一行呢。失尖。下面鵬哥就來(lái)統(tǒng)計(jì)一下ie6中我們經(jīng)常遇到的CSS問(wèn)題啊奄。不過(guò)目前基本都不需要兼容IE6了，甚至js嚴(yán)格模式直接放棄IE系列掀潮，菇夸，而且ES6，H5仪吧，CSS3基本也就兼容IE高版本庄新。不廢話，直接上代碼薯鼠。
1.雙邊距BUG：
* { margin:0; padding:0; }
.box { float:left; margin-left:20px; width:200px; height:200px; background-color:red; }
<div class="box"></div>
/*
bug產(chǎn)生原因
margin的方向與浮動(dòng)的方向相同
解決方法：
浮動(dòng)的元素身上加 display:inline;
*/
2.li標(biāo)簽下面多出的邊距：
* { margin:0; padding:0; }
ul { width:500px; margin:100px auto; background:green; }
li { list-style:none; overflow:hidden; width:100%; background:#39F; vertical-align:top; }
.left { float:left; height:200px; width:200px; background:#F63; }
<ul>
<li>
<div class="left"></div>
</li>
<li>
<div class="left"></div>
</li>
<li>
<div class="left"></div>
</li>
<li>
<div class="left"></div>
</li>
<li>
<div class="left"></div>
</li>
</ul>
/*
bug產(chǎn)生原因
li 中有浮動(dòng)的元素
解決方法：
li 加上 vertical-align:top;
*/
3.單像素BUG：
<style>
* { margin:0; padding:0; }
.box { position:relative; width:501px; height:501px; margin:100px auto; background:red; }
h3 { position:absolute; right:0; bottom:0; width:100px; height:100px; background:#33C; }
</style>
</head>
<body>
<div class="box">
<h3></h3>
</div>
</body>
/*
bug產(chǎn)生原因
IE6 對(duì)于奇數(shù)定位支持的不是很好
解決方法：
在設(shè)計(jì)初期就把寬高設(shè)置為偶數(shù)
*/
4.IE6最小高度：
<style>
* { margin:0; padding:0; }
div { overflow:hidden; width:200px; height:0; border:1px solid red; }
</style>
</head>
<body>
<div></div>
</body>
/*
bug產(chǎn)生原因
IE6 下一個(gè)div有寬度择诈，高度最小不是0而是字體大小
解決方法：
給 div height:0; 并且 overflow:hidden;
*/
5.IE6子級(jí)撐開(kāi)父級(jí)：
<style>
* { margin:0; padding:0; }
div { overflow:hidden; width:200px; height:200px; margin:100px auto; border:10px solid red; }
h3 { width:300px; height:300px; background:yellow; }
</style>
</head>
<body>
<div>
<h3></h3>
</div>
</body>
/*
解決方法:
給父級(jí) overflow:hidden;
*/
6.IE6不支持子級(jí)的margin
<style>
* { margin:0; padding:0; }
div { width:200px; height:200px; margin:100px auto; border:10px solid red; }
h3 { width:100px; height:100px; margin-left:-50px; background:#33C; position:relative; }
</style>
</head>
<body>
<div><h3></h3></div>
</body>
/*
解決方法:
子級(jí)身上加 position:relative;
*/
7.IE6下3像素BUG：
<style>
* { margin:0; padding:0; }
div, h3 { width:200px; height:200px; }
div { float:left; background:#06F; }
h3 { float:left; background:#F90; }
</style>
</head>
<body>
<div></div><h3></h3>
</body>
/*
解決方法：
兩個(gè)元素都浮動(dòng)就好
*/
8.IE6下line-height失效：
<style>
* { margin:0; padding:0; }
ul { width:500px; margin:100px auto; }
li { list-style:none; height:50px; line-height:50px; border:1px solid #000; }
input { height:16px; margin-top:16px; }
</style>
</head>
<body>
<ul>
<li><span>文字文字文字文字</span><input type="text" /></li>
</ul>
</body>
/*
產(chǎn)生原因：
行內(nèi)元素與行內(nèi)塊元素在同一行中，行內(nèi)元素的line-height失效
解決方法：
input 加 margin-top 等于 (父級(jí)高度-input高度)/2
*/
9.IE6下png半透明失效：
</head>
<body>
</body>
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png');
</script>
<![endif]-->
10.select層級(jí)問(wèn)題：
<style>
* { margin:0; padding:0; }
select { width:100px; height:100px; }
div { position:absolute; top:0; left:0; width:200px; height:200px; background:red; }
</style>
</head>
<body>
<select></select>
<div>
</div>
</body>
/*
解決方法：
自己寫(xiě)一套 select 然后用 js 控制
原生的本來(lái)就不好看出皇，而不容易修飾
*/
11.IE6下定位元素消失：
<style type="text/css">
.box { width:600px; height: 50px; color:#fff; border: 1px solid red; zoom:1; position: relative; }
.box:after { display:block; content:''; clear: both; }
.box div { font-size:50px; }
.box1 { position:absolute; left:0; top:0; width:500px; height:50px; background:#f0f; }
.box2 { overflow: hidden; display:inline; float:left; width:300px; height:30px; background:red; }
.box3 { overflow: hidden; display:inline; float:left; width:300px; height:30px; background:blue;}
</style>
</head>
<body>
<div class="box">
<div class="box1">box1</div>
<div></div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
/*
IE6 下羞芍，定位元素與浮動(dòng)元素在同一個(gè)父級(jí)下緊挨著。定位的元素會(huì)消失
解決方法：
在定位元素與浮動(dòng)元素之間放一個(gè)塊標(biāo)簽即可解決郊艘。
*/
12.UL+LI+a做導(dǎo)航掉下來(lái)：
<style>
* { margin:0; padding:0; }
ul { overflow:hidden; zoom:1; background:red; }
li { display:inline; float:left; list-style:none; }
a { float:left; height:50px; line-height:50px; padding:0 50px; }
a:hover {
background:blue;
color:#fff;
}
</style>
</head>
<body>
<ul class="clear">
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">身邊團(tuán)購(gòu)</a></li>
<li><a href="#">身邊外賣</a></li>
</ul>
</body>
/*
bug 產(chǎn)生原因：
a 標(biāo)簽沒(méi)有 width 荷科，只有 padding 的時(shí)候，display:block就會(huì)出問(wèn)題
*/
13.Ul浮動(dòng)li不浮動(dòng)出現(xiàn)的問(wèn)題：
<style>
* { margin:0; padding:0; }
ul {
display:inline;
float:left;
width:200px;
border:1px solid red;
font-size:12px;
}
li {
display:inline;
float:left;
width:100%;
list-style:none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">新聞標(biāo)題新聞標(biāo)題新聞標(biāo)題</a></li>
<li><a href="#">新聞標(biāo)題新聞標(biāo)題新聞標(biāo)題</a></li>
<li><a href="#">新聞標(biāo)題新聞標(biāo)題新聞標(biāo)題</a></li>
<li><a href="#">新聞標(biāo)題新聞標(biāo)題新聞標(biāo)題</a></li>
</ul>
</body>
/*
bug 產(chǎn)生原因：
ul 浮動(dòng)纱注，li沒(méi)有浮動(dòng)
解決方法：
li 也浮動(dòng)
*/
目前就這么多畏浆，前面鵬哥也發(fā)過(guò)js兼容性問(wèn)題的文章，喜歡的朋友可以去看下狞贱。以上結(jié)束刻获。
