ie6, ie7兼容性問題以及處理辦法
1、IE6中絕對定位位置錯誤
問題描述:在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;
[html]
- <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;是包不住子級的相對定位的。
解決辦法:父級也設為相對定位。
[html]
- <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。
[html]- <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包起來。
[html]
- <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。
[html]- <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加浮動。
[html]- <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的背景。
[html]
- .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下輸入類型的表單控件輸入文字的時候,背景圖片會跟著一塊移動。
解決辦法:把背景加給父級。
[html]
- .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的圖片
[html]
- <!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>
ie6, ie7兼容性問題以及處理辦法