码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2017-07-28 23:53:43      阅读：283      评论：0      收藏：0      [点我收藏+]

标签：input   bar   highlight   back   value   har   width   pos   doc   

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兼容性问题以及处理办法

标签：input   bar   highlight   back   value   har   width   pos   doc   

原文地址：http://www.cnblogs.com/liangxiaoli/p/7252853.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！