IE6 的兼容相关问题

因为在实习公司要求兼容IE6+，所以将IE6相关的样式兼容问题列出，及解决方案。

1.让页面变丑的透明背景图片问题：

HTML都为以下代码：

<div class="img-png"></div>

一般情况下使用png格式图片作为背景图片CSS部分：

1.img-png{
2       64px;
3       height:64px; 
4       background: url("imgsss/day.png") no-repeat;
5}

效果图：

chrome下：　　　　IE6下：

IE6 的兼容相关问题

　　IE6下是不是很丑，带一个灰色的底色。面对这种问题，解决方案是：针对IE6，使用 png8格式的图片来做背景图片，在IE6效果如下：

　　　　　　 IE6 的兼容相关问题

　　终于没那么丑了，但是最好分开写，只在IE6时使用png8,因为png8色彩度等很低，会影响图片质量。分开的写法如下：

1 .img-png{
2       width:64px;
3       height:64px; 
4       background: url("imgsss/day.png") no-repeat;/*IE6自动跳过*/
5       _background:url("imgsss/day-png8.png");/*显示此样式*/
6   }

2.让带有透明度背景颜色消失的问题：

HTML部分同上一条；

一般写法的情况下的CSS部分：

1   body{background: blue;}
2   .img-png{
3       width:64px;
4       height:64px; 
5       background-color: #000;
6       opacity: 0.5;
7   }

chrome下：　　　　　　　IE6下：

IE6 的兼容相关问题

是不是看完整个人都不好了，变成一块黑了，对于此现象解决方法是：（运行效果跟chrome相同啦~）

.img-png{
      width:64px;
      height:64px; 
      background-color: #000;
      opacity: 0.5;
    filter: alpha(opacity=70);/*增加此方法*/
  }

3.IE6怪异解析将padding与border算入宽高：

看看你的HTML第一行是不是没有写文档申明！

因为没加入文档声明<!doctype html> ，所以造成非盒模型解析的原因，加入就好了。

4.当块元素左右浮动，设定margin时造成双倍边距：

使元素变成行内元素：display：inline

5.内部盒模型超出父级，父级被撑大：

在父级元素内使用overflow：hidden，隐藏超出内容

6.img作为块元素时，底边多出空白，并且带有蓝色的边框：

对于多出边框(3种方法）：

　　a.让父级设置 overflow：hidden;
　　b.设置 img{display:block;}

　　c.设置 _margin:-5px;
对于图片带有蓝边的问题：

　　设置 img{border:none;}

7.li间有间距(3种方法）：

　 a.设置float:left;

　　b.设置display:inline;

　　c.给li中文本末尾添加一个空格

8.块级元素中含有文字和带有右浮动的元素，右浮动的行内元素自动换行：

HTML部分：

<h3>我是个标题<a href="" style="float:right">更多>></a></h3>

CSS部分：

body{background: yellow;width: 30%;margin: 0 auto;color: #444444;}

chrome下：

IE6 的兼容相关问题

IE6下：

IE6 的兼容相关问题

解决方案，将你想要右浮动的行内元素放在文字的前面，就变成跟chrome一样想要的效果了：

<h3><a href="" style="float:right">更多>></a>我是个标题</h3>

9.设置position属性时，left、top发生错位：

为想要作为参照的父级（position：relative;)，设置宽高或者添加 *zoom：1;

10.子级中设有position属性，导致父级overflow失效：

为父级设置 position：relative;

11.圆角问题：

使用圆角图片定位到边框（不然就放弃在IE6的圆角效果，不影响功能）

12.IE6背景闪烁

将链接、按钮用CSS sprites作为背景，鼠标触碰会发生闪烁的情况，因为IE6没有将图片缓存，每次触碰都会重新加载，解决方法（2种）：

　　a.不使用雪碧图

　　b.用JavaScript设置IE6缓存这些图片：

document.execCommand("BackgroundImageCache",false,true);

13.IE6调整窗口大小时，body居中，body里的相对定位元素固定不动：

给body设置 position：relative;即可

大部分解决方案都亲测有效，会随着遇到的更多问题来继续添加。

so 未完待续~

IE6 的兼容相关问题

相关推荐