ie6, ie7兼容性问题以及处理办法

Posted 秋水涴晴汐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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像素的偏差。
解决办法：设为偶数。

[html]
  1. <style>  
  2. #box1{width:303px; height:303px;border:1px solid black; position:relative;}  
  3. #box2{ width:50px; height:50px; background:#7c1; position:absolute;right:-1px;bottom:-1px;}  
  4. </style>  
  5.   
  6. <body>  
  7. <div id="box1">  
  8.     <div id="box2"></div>  
  9. </div>  
  10. </body>  

3、IE6浮动元素双边距bug
问题描述：IE6下块元素有浮动和横向margin的时候，横向的margin值被放大成两倍。
解决办法：给浮动元素加 display:inline。

[html]
  1. <style>  
  2. body{margin:0;}  
  3. .wrap{float:left;border:2px solid #000;}  
  4. .box{width:100px;height:100px;background:red;margin:0 100px;float:left;display:inline; }  
  5. /*  
  6.     IE6下的双边距BUG:  
  7.     在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍  
  8.     解决办法: display:inline;  
  9. */  
  10. </style>  
  11.   
  12. <body>  
  13. <div class="wrap">  
  14. <div class="box"></div>  
  15. </div>  
  16. </body>  

4、IE67下li底部间隙的BUG
问题描述：在ie67下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙。
解决办法：给li设置 float:left或者给li加vertical-align:top。

[html] 
  1. <style>  
  2. .list{ width:300px;margin:0;padding:0;}  
  3. .list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; vertical-align:top;}  
  4. .list a{float:left;}  
  5. .list span{float:right;}  
  6. /*  
  7.     IE6，7下li的间隙  
  8.     在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙  
  9.     解决办法: 1.给li加浮动 或者 2.给li加vertical-align:top;  
  10. */  
  11. </style>  
  12.   
  13. <body>  
  14. <ul class="list">  
  15.     <li>  
  16.         <a href="#">文字文字文字文字文字</a>  
  17.         <span>作者</span>  
  18.     </li>  
  19.     <li>  
  20.         <a href="#">文字文字文字文字文字</a>  
  21.         <span>作者</span>  
  22.     </li>  
  23. </ul>  
  24. </body>  

5、IE6下最小高度问题

问题描述：在IE6下高度小于19px的元素，高度会被当做19px来处理。

解决办法：设置font-size：0;

 

[html]
  1. <style>  
  2. body{ margin:0;background:#000;}  
  3. .box{height:5px;background:red; font-size:0;}  
  4. /*  
  5.     在IE6下高度小于19px的元素，高度会被当做19px来处理  
  6.     解决办法:font-size:0; 或者 overflow:hidden;  
  7. */  
  8. </style>  
  9.   
  10. <body>  
  11. <div class="box"></div>  
  12. </body>  

6、ie6 下子级的相对定位

问题描述：ie6 下父级的overflow:hidden;是包不住子级的相对定位的。

解决办法：父级也设为相对定位。

 

[html]
  1. <style>  
  2. #box1{width:500px; height:300px; background:blue; overflow:hidden;position:relative;}  
  3. #box2{width:300px; height:500px; background:yellow; position:relative;}  
  4. </style>  
  5. </head>  
  6. <body>  
  7. <div id="box1">  
  8.     <div id="box2"></div>  
  9. </div>  
  10. </body>  

7、在IE6下子元素margin问题

问题描述：在IE6下父级有边框的时候，子元素的margin值消失。

解决办法：触发父级的haslayout。

[html] 
  1. <style>  
  2. body{margin:0;}  
  3. .box{background:blue;border:1px solid #000;zoom:1;}  
  4. .div{width:200px;height:200px;background:red;margin:100px;}  
  5. </style>  
  6.   
  7. <body>  
  8. <div class="box">  
  9.     <div class="div"></div>  
  10. </div>  
  11. </body>  

8、在IE6下的文字溢出BUG

问题描述：子元素的宽度和父级的宽度相差小于3px的时候或两个浮动元素中间有注释或者内嵌元素。

解决办法：用div把注释或者内嵌元素用div包起来。

 

[html] 
  1. <style>  
  2. .box{ width:400px;}  
  3. .left{float:left;}  
  4. .right{width:400px;float:right;}  
  5. </style>  
  6.   
  7. <body>  
  8. <div class="box">  
  9.     <div class="left"></div>  
  10.     <div><!-- IE6下的文字溢出BUG --><span></span></div>  
  11.     <div class="right">↓leo是个大胖子</div>  
  12. </div>  
  13. </body>  

9、绝对定位元素消失

问题描述：当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失。

解决办法：给定位元素外面包个div。

[html]
  1. <style>  
  2. .box{ width:200px;height:200px;border:1px solid #000; position:relative;}  
  3. span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}  
  4. ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}  
  5. </style>  
  6.   
  7. <body>  
  8. <div class="box">  
  9.     <ul></ul>  
  10.     <span></span>  
  11. </div>  

10、表单控件1px间隙

问题描述：在IE6，7下输入类型的表单控件上下各有1px的间隙。

解决办法：给input加浮动。

[html] 
  1. <style>  
  2. .box{ width:200px;height:32px;border:1px solid red;}  
  3. input{width:100px;height:30px;border:1px solid #000;margin:0;padding:0; float:left;}  
  4. </style>  
  5. <div class="box">  
  6.     <input type="text" />  
  7. </div>  

11、表单控件加border:none无效

问题描述：在IE6，7下输入类型的表单控件加border:none无效。

解决办法：重置input的背景。

 

[html] 
  1. .box{ width:200px;height:32px;border:1px solid red;background:yellow;}  
  2. input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:#fff;}  
  3. <div class="box">  
  4.     <input type="text" />  
  5. </div>  

12、表单控件背景图片会移动

问题描述：在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动。

解决办法：把背景加给父级。

 

[html]
  1. .box{ width:100px;height:30px;border:1px solid red;background:yellow; background:url(ball.png) no-repeat;}  
  2. input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:none;}  
  3. <div class="box">  
  4.     <input type="text" />  
  5. </div>  

13、ie6下png

问题描述：ie6不支持png24的图片

 

[html] 
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    5. <title>无标题文档</title>  
    6. <style>  
    7. body{ background:#000;}  
    8. .box{width:400px;height:400px;background:url(img/png.png);}  
    9. </style>  
    10. <!--[if IE 6]>  
    11. <script src="DD_belatedPNG_0.0.8a.js"></script>  
    12. <script>  
    13. DD_belatedPNG.fix(‘.box‘);  
    14. </script>  
    15. <![endif]-->  
    16. </head>  
    17. <body>  
    18. <div class="box"></div>  
    19. </body>  
    20. </html>  

以上是关于ie6, ie7兼容性问题以及处理办法的主要内容，如果未能解决你的问题，请参考以下文章

IE6 IE7 ‘JSON’ 未定义

兼容问题

IE6和IE7之间的浏览器兼容性

IE6-IE11兼容性问题列表及解决办法总结

querySelector和querySelectorAll在IE6和IE7下的兼容性问题

css浏览器兼容问题