HTML常见兼容问题

 

1，IE的双边距BUG

问题：块级元素float后设置横向margin，IE6显示的margin比设置的要大；

解决：给块级元素设置display:inline;只有IE6能识别。

2，超链接访问过后hover央视不出现

问题：被点击访问过的超链接不再具有hover和active了；

解决：改变CSS属性的排列顺序：link>visited>hover>active;

3,3像素的问题

问题：在IE7中两个紧邻的div，在IE6中中会出现3px的间隙，这就是传说中的IE 3px BUG;

解决：这是由于使用float引起，使用display:inline-3px可以解决；

4，IE z-index

问题：父元素由定位，子元素无论设置z-index为多少，都会显示在最上面；

解决：那是因为z-index是有继承的，父元素有定位，默认z-index为1，那么子元素z-index也为1。如想改变的话给父元素设置position：reletive后设置z-index；

5，IE5-IE8不支持opacity;

解决：使用滤镜

 filter:alpha(opacity=60);/*for IE5-IE7*/ 

 -ms-filter:''progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'';

6,IE不支持PNG透明背景

解决：IE6下使用gif图片

7，PNG透明

问题：用透明PNG图片作为连接的背景，图像的透明部分变得不能点击；

解决：在兼容IE的代码中，给a标签设置背景，而background的url()设置为当前页面上。

8，Min-height最小高度

问题：没办法设置最小高度

解决：用!import，代码：height:auto !import;height：最小px；

9，select在IE6下遮盖

解决：使用iframe当作div的底，div可以遮盖iframe。iframe可以遮盖select；

10，没办法定义1px宽度的容器

问题：IE6默认行高导致；

解决：使用over:hidden;zoom:0.08;line-height:1px;可以解决。

11，浏览器默认的margin和padding不统一

解决：加一个全局的*{margin:0;padding:0;border-size:border-box}，或者css初始化。

12，a(href属性)标签嵌套下的img标签，在IE下会有边框

解决：a img（border：none）；

13，input中button会有默认的边框和阴影

解决：设置border:none；在IE6以下，还需加上border-color：transparet；

 

结语：如果有错误或不足，恳请指出。如果有用的话，请多多点赞和关注吧，谢谢了！