时间戳

首页 > 技术文章 > IE浏览器兼容问题(下)——IE6的常见问题

IE浏览器兼容问题(下)——IE6的常见问题

qiujianmei 2017-07-17 18:18 原文

IE6常见兼容性问题

1、盒模型问题

（1）DTD问题

DTD：文档定义类型，规定了要遵循的书写规范。

如果不写DTD，高级浏览器还是可以正常加载，IE6会以怪异模式进行加载。

盒模型：正常应该是外扩的（实际占位会因为加了padding和border变大），IE6不写DTD是内减的（实际占位不变，padding和border的占位是向内的）。

这也是HTML5的兼容性问题之一。

 

 解决方法：必须写DTD。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

（2）不支持小于一个文字字号的高度的盒子

如果不设置文字字号，IE6中不支持高度低于19px的盒子。如果设置高度低于19px，以19px显示。

 

解决方法：

①设置盒子的内部文字字号为0。font-size: 0;

②给盒子设置高度，溢出高度的部分隐藏。overflow: hidden;

 

（3）a标签中图片的边框

如果一个插入图片（img标签），外层被a标签嵌套，IE6中图片会有一个蓝色的边框。

 

去掉边框的方法：清除img默认样式。

不论img图片是否放在a标签内，都给他清一下边框样式，将img的border设置为0或none。 

 

（4）块级标签内的图片下边空隙问题

块级元素内如果嵌套img标签，高级浏览器会自动被图片撑开。IE6撑开时，底部多出一段距离。

 

解决方法：

给img图片转块。display: block

或者给父级元素添加高度，溢出隐藏。

 

2、浮动

（1）不浮动的元素不会钻空

同级元素如果一个元素浮动，一个元素不浮动，浮动的元素应该让出标准流位置，后面的元素占有这个位置。

高级浏览器中是压盖效果，浮动的盖住了没有浮动的。

IE6中并没有压盖，而是水平排列效果。

 

解决方法：

①同级元素要浮动都浮动，不能一部分浮动，一部分不浮动。

②制作压盖效果，用定位不要用浮动。

 

（2）3像素bug问题

一个元素浮动，一个元素不浮动，除了并排显示之外，两个元素之间还有一个3px的间距。

 

解决方法：

①不能一个浮动一个不浮动。

②如果必须一个浮动一个不浮动，还要解决3像素bug：给浮动的元素添加margin值为-3px，将距离拉近。

 

（3）双倍margin问题

如果一组元素全部进行浮动，而且每个元素都有同方向的margin-left外边距，IE6中第一个HTML元素与父级之间的margin距离是设置的值的两倍。

 

解决方法：

①不要用子级的margin去踹父亲，父子之间的间距用父级的padding挤出来，每个子元素设置与浮动方向相反的外边距。

 ul{

  list-style: none;

  width: 980px;

  height: 50px;

  padding-left: 20px;

  border: 5px solid red;

  margin: 100px auto;

  }

  ul li{

  float: left;

  width: 100px;

  height: 50px;

  background: yellowgreen;

  margin-right: 20px;

  }

 

②单独给IE6设置首个元素的外边距减半，其他浏览器默认为原值。IE6中减半的数值自动双倍。

 ul li{

  float: left;

  width: 100px;

  height: 50px;

  background: yellowgreen;

  margin-left: 20px;

  }

  ul li.first{

  _margin-left: 10px;

  }

 

 

（4）溢出隐藏清除浮动失效

overflow：hidden属性在清除浮动时 ，IE6中可能会失效。

不设置宽度和高度：清浮动效果失效。

 

解决方法：

给父盒子设置宽度：清浮动效果生效。

 

浏览器加载网页时，有两种布局加载机制。

有布局的机制：hasLayout，一个元素在加载时，自身的尺寸按照内部子元素、内容和自身设置的尺寸属性进行加载的。

没有布局的机制：自身元素加载时，相关尺寸按照父级元素的尺寸进行加载的。

 

如果要用溢出隐藏清除浮动，应该由子元素的数值决定父元素的数值，符合有布局的机制。

想要用溢出隐藏清除浮动：触发hasLayout机制。

 

触发方法：可以通过设置一些父盒子的有长度、数值的属性去触发。不一定每个有数值的属性每次都能触发成功机制。

 

有一个叫做zoom的属性，始终能触发有布局的机制。

zoom：放大镜。放大缩小盒子自身尺寸的属性。

属性值：数字。

 放大或缩小显示时，按照盒子原始的自身宽高进行的缩放。必须要知道盒子的原始自身尺寸。

作为辅助清除浮动属性：属性值必须为1.

  div{

  border: 10px solid red;

  overflow: hidden;

  _zoom: 1;    只有IE6加载

 }

 

 

3、固定定位

IE6浏览器不支持固定定位。

 

解决方法：以后用js去模拟固定定位。

.box{
　　width: 100px;
　　height: 100px; 
　　text-align: center;
　　line-height: 100px;  
　　background: red;  
　　position: fixed;  
　　top: 50%;  
　　left: 50%;  
　　_position:absolute;  
　　_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight/2-this.clientHeight/2);  
　　_left:expression(document.documentElement.clientWidth/2-this.clientWidth/2);  
}

 

4、盒子透明

opacity盒子透明度属性在IE8及以下有兼容问题。

 

解决方法：IE浏览器有自己的透明度设置属性。

滤镜：filter。

属性值：有很多种滤镜效果的属性值，透明度属性只是其中一种。

透明度设置：

数值：0-100之间的整数，20表示透明度为20%，等价于opacity的0.2.

设置时两个数值必须保持一致。

opacity：0.2；
filter: alpha(opacity=20);

 

5、图片透明

插入图、背景图。

使用背景透明的图片：png、GIF。

IE6中：不支持背景图和插入图的透明和半透明的png图片。

 

解决方法：

①如果图片是只有透明，没有半透明，可以用GIF格式图片换掉png图片。

②通过给IE6浏览器单独加一段js代码，解决透明和半透明的问题。

 

 <!--[if IE 6]>

      <script src="js/iepng.js" type="text/javascript"></script>　　//js的文件路径，必须写对。

      <script type="text/javascript">

     EvPNG.fix('div,ul,img,li,input,span,b,h1,h2,h3,h4');   //处理图片透明的标签的选择器。

      </script>

 <![endif]-->

注：这一段代码的书写位置，最好写在HTML结构的最后面。

推荐阅读