ie6, ie7相容性問題以及處理辦法彙總
阿新 • • 發佈：2019-02-07
1、IE6中絕對定位位置錯誤
問題描述：在ie6中，如果參照物沒有觸發haslayout ，那麼絕對定位的容器的left和bottom就會有問題。
解決辦法：在相對定位的父容器上加入 zoom:1 來觸發ie的haslayout即可解決。
小技巧：通常我們在設定一個容器為position:relative的時候 ，都會加上zoom:1來解決很多ie下的問題。
2、IE6中絕對定位1畫素偏差
問題描述：在 IE6 下定位元素的父級寬高都為奇數時，那麼在 IE6 下定位元素的 right和bottom都有1畫素的偏差。
解決辦法：設為偶數。
3、IE6浮動元素雙邊距bug
問題描述：IE6下塊元素有浮動和橫向margin的時候，橫向的margin值被放大成兩倍。
解決辦法：給浮動元素加 display:inline。
4、IE67下li底部間隙的BUG
問題描述：在ie67下，li本身沒浮動，但是li的內容有浮動，li下邊就會產生一個間隙。
解決辦法：給li設定 float:left或者給li加vertical-align:top。
問題描述：在ie6中，如果參照物沒有觸發haslayout ，那麼絕對定位的容器的left和bottom就會有問題。
解決辦法：在相對定位的父容器上加入 zoom:1 來觸發ie的haslayout即可解決。
小技巧：通常我們在設定一個容器為position:relative的時候 ，都會加上zoom:1來解決很多ie下的問題。
2、IE6中絕對定位1畫素偏差
問題描述：在 IE6 下定位元素的父級寬高都為奇數時，那麼在 IE6 下定位元素的 right和bottom都有1畫素的偏差。
解決辦法：設為偶數。
<style> #box1{width:303px; height:303px;border:1px solid black; position:relative;} #box2{ width:50px; height:50px; background:#7c1; position:absolute;right:-1px;bottom:-1px;} </style> <body> <div id="box1"> <div id="box2"></div> </div> </body>
3、IE6浮動元素雙邊距bug
問題描述：IE6下塊元素有浮動和橫向margin的時候，橫向的margin值被放大成兩倍。
解決辦法：給浮動元素加 display:inline。
<style> body{margin:0;} .wrap{float:left;border:2px solid #000;} .box{width:100px;height:100px;background:red;margin:0 100px;float:left;display:inline; } /* IE6下的雙邊距BUG: 在IE6下，塊元素有浮動和橫向margin的時候，橫向的margin值會被放大成兩倍 解決辦法: display:inline; */ </style> <body> <div class="wrap"> <div class="box"></div> </div> </body>
4、IE67下li底部間隙的BUG
問題描述：在ie67下，li本身沒浮動，但是li的內容有浮動，li下邊就會產生一個間隙。
解決辦法：給li設定 float:left或者給li加vertical-align:top。
<style> .list{ width:300px;margin:0;padding:0;} .list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; vertical-align:top;} .list a{float:left;} .list span{float:right;} /* IE6，7下li的間隙 在IE6，7下li本身沒浮動,但是li內容有浮動的時候，li下邊就會產生幾px的間隙 解決辦法: 1.給li加浮動 或者 2.給li加vertical-align:top; */ </style> <body> <ul class="list"> <li> <a href="#">文字文字文字文字文字</a> <span>作者</span> </li> <li> <a href="#">文字文字文字文字文字</a> <span>作者</span> </li> </ul> </body>
5、IE6下最小高度問題
問題描述：在IE6下高度小於19px的元素，高度會被當做19px來處理。
解決辦法：設定font-size：0;
<style>
body{ margin:0;background:#000;}
.box{height:5px;background:red; font-size:0;}
/*
在IE6下高度小於19px的元素，高度會被當做19px來處理
解決辦法:font-size:0; 或者 overflow:hidden;
*/
</style>
<body>
<div class="box"></div>
</body>
6、ie6 下子級的相對定位
問題描述：ie6 下父級的overflow:hidden;是包不住子級的相對定位的。
解決辦法：父級也設為相對定位。
<style>
#box1{width:500px; height:300px; background:blue; overflow:hidden;position:relative;}
#box2{width:300px; height:500px; background:yellow; position:relative;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
7、在IE6下子元素margin問題
問題描述：在IE6下父級有邊框的時候，子元素的margin值消失。
解決辦法：觸發父級的haslayout。
<style>
body{margin:0;}
.box{background:blue;border:1px solid #000;zoom:1;}
.div{width:200px;height:200px;background:red;margin:100px;}
</style>
<body>
<div class="box">
<div class="div"></div>
</div>
</body>8、在IE6下的文字溢位BUG
問題描述：子元素的寬度和父級的寬度相差小於3px的時候或兩個浮動元素中間有註釋或者內嵌元素。
解決辦法：用div把註釋或者內嵌元素用div包起來。
<style>
.box{ width:400px;}
.left{float:left;}
.right{width:400px;float:right;}
</style>
<body>
<div class="box">
<div class="left"></div>
<div><!-- IE6下的文字溢位BUG --><span></span></div>
<div class="right">↓leo是個大胖子</div>
</div>
</body>9、絕對定位元素消失
問題描述：當浮動元素和絕對定位元素是並列關係的時候，在IE6下絕對定位元素會消失。
解決辦法：給定位元素外面包個div。
<style>
.box{ width:200px;height:200px;border:1px solid #000; position:relative;}
span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}
ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}
</style>
<body>
<div class="box">
<ul></ul>
<span></span>
</div>10、表單控制元件1px間隙
問題描述：在IE6，7下輸入型別的表單控制元件上下各有1px的間隙。
解決辦法：給input加浮動。
<style>
.box{ width:200px;height:32px;border:1px solid red;}
input{width:100px;height:30px;border:1px solid #000;margin:0;padding:0; float:left;}
</style>
<div class="box">
<input type="text" />
</div>11、表單控制元件加border:none無效
問題描述：在IE6，7下輸入型別的表單控制元件加border:none無效。
解決辦法：重置input的背景。
.box{ width:200px;height:32px;border:1px solid red;background:yellow;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:#fff;}
<div class="box">
<input type="text" />
</div>
12、表單控制元件背景圖片會移動
問題描述：在IE6，7下輸入型別的表單控制元件輸入文字的時候，背景圖片會跟著一塊移動。
解決辦法：把背景加給父級。
.box{ width:100px;height:30px;border:1px solid red;background:yellow; background:url(ball.png) no-repeat;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:none;}
<div class="box">
<input type="text" />
</div>13、ie6下png
問題描述：ie6不支援png24的圖片
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<style>
body{ background:#000;}
.box{width:400px;height:400px;background:url(img/png.png);}
</style>
<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('.box');
</script>
<![endif]-->
</head>
<body>
<div class="box"></div>
</body>
</html>