IE6版本下的各种兼容性问题

顾陌 发布时间:2015-12-29 分类:Web 阅读:1425次 1 条评论

昨天对公司的网站进行了IE低版本的适配调整,调整了IE8以下的浏览器布局混乱,层次覆盖等等问题。一天的调整,整理结果如下:

1、CSS hack:区分IE6、IE7、IE8、Chrome、Firefox、Opera等

由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

  • IE低版本 (IE系列)都可以支持“*”,其他不支持

  • IE6能识别"_",但是IE7及其他不支持。

  • IE6不支持!important,其他都支持

  • IE7、IE7支持 {+color:#fff;},IE8及其他不支持

  • <!--[if IE]>这段文字只在IE浏览器显示<![endif]-->     <!--[if !IE]>这段文字只在非IE浏览器显示<![endif]-->

  • <!--[if IE 6]>这段文字只在IE6浏览器显示<![endif]-->

  • <!--[if gte IE 6]>这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->

  • <!--[if ! IE 8]>这段文字在非IE8浏览器显示<![endif]-->

hack

写法

实例

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

IE9(S)

IE9(Q)

IE10(S)

IE10(Q)

*

*color

青色

Y

Y

Y

Y

N

Y

N

Y

N

Y

+

+color

绿色

Y

Y

Y

Y

N

Y

N

Y

N

Y

-

-color

黄色

Y

Y

N

N

N

N

N

N

N

N

_

_color

蓝色

Y

Y

N

Y

N

Y

N

Y

N

N

#

#color

紫色

Y

Y

Y

Y

N

Y

N

Y

N

Y

\0

color:red\0

红色

N

N

N

N

Y

N

Y

N

Y

N

\9\0

color:red\9\0

粉色

N

N

N

N

N

N

Y

N

Y

N

!important

color:blue !important;

color:green;

棕色

N

N

Y

N

Y

N

Y

N

Y

Y


2、IE6不支持position:fixed;的问题

通过ie的CSS表达式(expression)来完美的实现ie6下position:fixed效果,css代码如下:

/* IE6浏览器的特有方法 */

* html .ie6fixedTL{position:absolute; left:expression(eval(document.documentElement.scrollLeft)); top:expression(eval(document.documentElement.scrollTop)) }

如果要设置元素悬浮边距,要分别为设置两次,比如我要让某个元素距顶部10个像素,距左部也是10个像素。


3、IE6下的z-index无效的bug问题;

如果没有设置父元素(祖先元素)的z-index,IE6按先后出现的顺序来绝定层的堆叠顺序。要想设置正常的z-index,就要一直找到它祖先节点,设置祖先的z-index的值大小。


4、IE6/IE7下对display:inline-block的支持性(display:inline/float:left;)

发现好像IE6和IE7不支持display:inline-block,查资料后发现原来只是部分支持。这里分两种情况:

1)当默认为inline元素(如span等)的display属性设置为inline-block时,IE6/IE7浏览器支持;

2)当默认为block元素(如div等)的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;

所以,你设置div的display:inline-block,发现无效。解决办法也有多种:

1)

先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下(...为省略的其他属性内容): 

    div {display:inline-block;...} 

    div {display:inline;}

2)直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:

    div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/

    div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/

3)设置div的float属性为float;


对了,文章写完竟然忘了黑IE浏览器。IE太烂太烂,建议大家不要用,不要用(黑IE现在成了政治正确)

关键字词: IE6css hack兼容性

已有1条留言

发表评论:

◎欢迎您的参与讨论。