IE下各种CSS问题汇总与解决方法

想必列位做前端的同学肯定被IE下面各种各样的小问题搞得头晕脑胀的吧。页面兼容确实是让人比较头大的事,而且IE的地位又如此重要,脾性有如此的古怪,只要搞定了它我们就没啥好怕的啦:P今天干脆就把这些常见常用问题以及解决方法汇集一下,主要是为了方便以后使用。本篇文章会不定时更新。

1.问题描述:
button类型的input标签Value值的text-indent样式在IE6/IE7下面不起作用。
参考解决方法:
font-size:0;line-height:0;
将字体大小和行高设置为0。

2.问题描述:
IE6下如果一个元素包含position:relative;的元素那么这个元素的overflow:hidden;会失效。
参考解决方法:
将这个元素的position也设置为relative,或者将包含的position值为relative元素的position值改为static。

3.问题描述
IE6,IE7下,使用document.createElement()方法创建对象后,对对象进行设置class的Attribute后样式不起作用。例如:
var node = document.createElement(‘div’);
node.setAttribute(‘class’,’my_style’);
这段代码在IE6和IE7中运行后样式表不起作用。IE8,FireFox等则没有这个问题。
参考解决办法:
使用“.”语法进行设置,例如:
var node = document.createElement(‘div’);
node.className = ‘my_style’;

4.问题描述

IE6下,如果父容器的position为relative,内部的元素会出现背景显示不正常的问题,内部添加zoom或者position:relative;可解决。但是如果添加zoom或者position会引起元素的不正常显示,谨慎使用。

转载请注明原文出处《IE下各种CSS问题汇总与解决方法》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。