对兼容ie浏览器所遇到的问题及总结
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 ; /*ie8,ie9,ie10共用*/
height:100px9; /*ie6,ie7,ie8,ie9,ie10共用*/
height:100px9 ; /*ie9,ie10共用*/