遇到的IE不兼容问题总结

IE浏览器兼容问题困扰多时，由于IE6不在进行修补，IE6的考虑也越来越少，有些IE遇到的不兼容的现象想做一个总结

1宽度或高度：IE的是width+border+margin+padding

google是width或height

2字体大小，同样是font-size:14px;在IE6中显示不一样，解决方法：行高

3一个通用的div居中的方法*{margin:0;padding:0} ,div{margin:0 auto};原因：IE浏览器和其他浏览器的每个属性的margin和padding不一样

4 a:hover .class{display:block},这个属性不能兼容IE,但是 a:hover li{display:block}全部兼容，可以用来滑动导航

5一个兼容各主流浏览器的透明方案：opacity:90;filter:alpha(opacity=0.9);

6 html5的新特性：<input type="date" />可以选择日历来填写信息，但不兼容IE,同样有一系列type,可以自己查阅

7 position:fixed,这个属性不兼容IE浏览器

8 在IE浏览器中块级元素在一行内浮动必须两边都加float属性，其他浏览器后面属性加float就足够了

9IE的3像素Bug问题，定义一个Div的宽度是，有3像素会跑到左边出来

下面是收集到的hack，可以写兼容页面

1.‘\9’:6

eg:.test { color/*\**/: blue\9 }

.header {width:300px;} /* 所有浏览器*/
.header {width/*\**/:330px\9;} /* 所有浏览器IE浏览器 */
.header {*width:310px;} /* IE7和IE6能识别,IE8和FF不能识别*/
.header {_width:290px;} /* IE6能识别，IE7、IE8和FF不能识别*/

 

2.利用条件注释语句：<!–[if IE]> 此内容只有IE可见 <![endif]–>

lt 表示less than 当前条件版本以下的版本，不包含当前版本。

gte 表示greeter than or equal 当前版本以上版本，并包含当前版本。

lte 表示less than or equal 当前版本以下版本，并包含当前版本。

 

3.其它hack 技术：

.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/

4.

汇总下IE各版本的css hack。

 

 

hack	示例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)
*	*color	Yes	Yes	Yes	Yes	No	Yes
+	+color	Yes	Yes	Yes	Yes	No	Yes
-	-color	Yes	Yes	No	No	No	No
_	_color	Yes	Yes	No	Yes	No	Yes
#	#color	Yes	Yes	Yes	Yes	No	Yes
\0	color\0	No	No	No	No	Yes	No
\9	color\9	Yes	Yes	Yes	Yes	Yes	Yes
!important	color:blue !important; color:green;	No	No	Yes	No	Yes	No

标准模式中：

1，减号(-)是IE6专有hack

2，反斜杠零(\0)是IE8专有hack