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. <body>
  6. <div id="box1">
  7. <div id="box2"></div>
  8. </div>
  9. </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. <body>
  12. <div class="wrap">
  13. <div class="box"></div>
  14. </div>
  15. </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. <body>
  13. <ul class="list">
  14. <li>
  15. <a href="#">文字文字文字文字文字</a>
  16. <span>作者</span>
  17. </li>
  18. <li>
  19. <a href="#">文字文字文字文字文字</a>
  20. <span>作者</span>
  21. </li>
  22. </ul>
  23. </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. <body>
  10. <div class="box"></div>
  11. </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. <body>
  7. <div class="box">
  8. <div class="div"></div>
  9. </div>
  10. </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. <body>
  7. <div class="box">
  8. <div class="left"></div>
  9. <div><!-- IE6下的文字溢出BUG --><span></span></div>
  10. <div class="right">↓leo是个大胖子</div>
  11. </div>
  12. </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. <body>
  7. <div class="box">
  8. <ul></ul>
  9. <span></span>
  10. </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>
时间： 2024-12-23 17:47:22

ie6, ie7兼容性问题以及处理办法的相关文章

IE6,IE7兼容性问题

1 计算宽高要精确,不要让内容的宽高超出设置的宽高,内容会撑开设置好的宽高. 2 元素浮动,如果浮动元素的宽度需要内容撑开,就给里边的块元素都加浮动. 3 元素要通过浮动并在同一行,就给这行的元素都加浮动. 4 注意标签嵌套规范:块元素里不能嵌套块元素. 5 最小高度问题,元素的高度小于19px的时候,会被当做19px处理   解决办法:overflow:hidden; 6 border{1px dotted;} 1px的点线边框不支持 解决办法:切背景平铺. 7 解决margin传递要触发ha

IE6/IE7中display:inline-block解决办法

IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的: 对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行,允许空格.(准确地说,应用此特性的元素现为内联对象,周围元素保持在同一行,但可以设置宽度和高度等块元素的属性) IE中对内联元素使用displ

转载：ie6,ie7兼容性总结

其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决. 下面是14条特殊情况仅供参考:1. 文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了.解决方案:给文字设定 line-height .确保所有文字都有默认的 line-height 值.这点很重要,在高度

IE6的兼容性问题及解决办法

1. 双边距问题 出现原因:当块级元素有浮动样式的时候,给元素添加margin-left和margin-right样式,在ie6下就会出现双倍边距: 解决办法:给当前元素添加样式,使当前元素不为块,如:display:inline;display:list-item 这样在元素浮动的时候就不会在ie6下面产生双倍边距的问题了. 2. 超链接hover点击后失效 出现原因:

DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼（转）

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用height: 100px; IE6 专用_height: 100px; IE6 专用*height: 100px; IE7 专用*+height: 100px; IE7.FF 共用height: 100px !important; 一.CSS HACK1, !important随着IE7对!i

IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总

http://www.jb51.net/css/85640.html 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1:li边距“无故”增加  任何事情都是有原因的,li边距也不例外.  先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的paddi

【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳

1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响.所以只好笨手笨脚地把padding去掉,换成margin.这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象. 现在终于发现解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置

IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在父标签中加入overflow:hidden:或zoom:100%示例代码: 不正常显示 ul{} li{ list-style:none; float:left; margin:10px;} 1. 你会发现左边10px 变成20px了, 解决办法:在li的CSS中加入:display:inline

IE6+IE7+IE8+IE9+FF兼容性调试

HACK原理:不同浏览器对各中字符的识别不同 (读完文章你会发现,FF和IE8对以下字符的识别能力完全相同) 在 CSS中常用特殊字符识别表: (1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6不能识别 !important外,  FF+IE8+IE7都能识别!important ; (3)_ : 除IE6支持_ 外,  FF+IE8+IE7都不支持_; (4)9:所有IE浏览器都识别(IE6.IE7.IE8.IE9) 示例: