ie浏览器兼容问题汇总

对兼容ie浏览器所遇到的问题及总结

互联快谈 2016-10-28 05:51

1，若直接给一个元素设置absolute定位。在浏览器缩放的时候。位置会错位。解决的方法是给外层的元素设置为relative定位。

2，低版本ie浏览器不支持placeholder属性

3，盒模型上规定了垂直边界重叠，若父元素有一个向上的margin值（10px），其子元素有一个向上的margin值（20px）。重叠部分取大者。因此父元素和上一个div之间出现的是20px的空隙。

4，使用display:inline-block会导致元素之间有空隙，解决方法：父元素设置font-size:0或采用浮动的方法；

5，Ie 8及以下不支持透明度的写法，低版本的ie浏览器的透明度写法filter:alpha(opacity:).

6,在谷歌浏览器中，一个li标签中存在一个a标签和一个span，li标签浮动，a标签旁边会多出来几px。解决方法是a标签进行浮动

7,要让背景图片使用ie-css.htc的border-radius属性。有bug。很难使用。最好把背景换成img来使用。

8，关于ie-css.htc的使用方法。Z-index要比周围元素大；要有定位属性；behavior中的路径最好写成绝对路径

9，ie浏览器低版本的一个bug，透明元素不响应hover事件！

10，在做区别ie8，ie9的hack的是时候。使用/9,/9/0来实现。发现若是做颜色的hack。可达到目的。若做margin-top的hack。发现在ie8,9下实现的效果是一样的。故猜测此hack只支持部分属性

11，在ie8里background: url(../images/goods.png)no-repeat!important; 背景图片不显示

background: url(../images/goods.png) no-repeat!important; 背景图片显示。 差距仅仅是多了个空格。

12，jquery中的trigger无法触发hover

13，在低版本ie浏览器下实现使用PIE.htc方法并要使背景透明的方法

background: url(../imgs/news-circle.png) no-repeat rgba(0,0,0,0.5);

-pie-background: url(assets/common/imgs/news-circle.png) no-repeat rgba(0,0,0,0.5); /*路径相对于html页面而言*/

-ms-border-radius: 350px 350px 0px 0px;

border-radius: 350px 350px 0px 0px;

behavior: url(PIE/PIE.htc);/*路径相对于html页面而言*/

14，在ie 6下使用button标签或input type=“button”或input type=“submit”时。并给它们加上border属性的时候。会发现外层绕着一层白色缝隙。解决的办法可以给它本身的css属性border：none 0；并给它加一个嵌套层。给嵌套层加一个border属性。

15,在ie7下发现padding-bottom属性失效。解决的方法是加上属性overflow:hidden;

16,在ie6下发现padding-bottom属性失效。解决的方法是让被他嵌套的最后一个元素设置margin-bottom值。

17，在ie 6下元素有默认的行高。解决方法是overflow:hidden;或font-size:0;或line-height:xx px;

18,ie 6下快元素进行浮动。并且有横向的margin，实际的margin会比设置的margin多一倍。解决的方法是display:inline;

19,在各个浏览器下img有空隙（回车的原因）。解决的方法是让图片浮动或给图片的包含层加font-size:0。

20,两个块元素，竖向的margin值不增加，会重叠，其间距为最大的margin值。

21，ie6对!important属性不支持

22，z-index不起作用的bug:

1）ie6下 首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个：1、父标签position属性为relative；2、问题标签含有浮动(float)属性。

2）所有浏览器：它只认第一个爸爸

层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：

父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

23,css hack:

_height:100px; /*ie 6专用*/

*+height:100px; /*ie 7专用*/

*height:100px ; /*ie6,ie7共用*/

height:100px\0; /*ie8，ie9，ie10共用*/

height:100px\9; /*ie6,ie7,ie8,ie9,ie10共用*/

height:100px\9\0; /*ie9,ie10共用*/