CSS兼容处理（二）

在IE6及以下版本的浏览器中定义小高度：

解决方法：#text { overflow：hidden; height：1px; font-size：0; line-height：0;}

具体详解：IE6及以下浏览器无法定义小高度的原因是，默认有行高。

在IE6及以下版本浏览器中定义最小高度：

解决方法：#text { min-height：100px; _height：100px;}

注意：此时#text不能设置overflow为hidden,否则模拟min-height失效。

解决按钮两边增白：

解决方法：input,button { overflow：visible; }

li两个浮动以上出现空白：

解决方法：li { vertical-align：top}

除了top,还可以设置text-top、middle、bottom、text-bottom,甚至特定的宽度和长度。

IE6下不能识别伪元素：first-letter/：first-line的问题：

解决方法：

方法一：花括号前增加空格。

如：

p：first-letter { float：left; font-size：40px; font-weight：bold;}

p：first-line { color：#090;}

方法二：花括号前换行。

如：

p：first-letter

{float：left; font-size：40px;font-weight：bold;}

p：first-line

{color：#090;}

在IE8中伪元素：first-letter/：first-line中忽略！important规则：

解决方法：尽量不要在：first-letter/：first-line中使用!important。

在IE6中同一条样式中忽略！important规则：

解决方法：把同一样式分开两个规则来定义同一个样式。

li内部元素定义了display：block的内联元素底部产生空白：

　　　　解决方法：给li内联元素加一个zoom：1.

代码示例：

BUG重现：

a,span { display：block;background：#ddd;}

<ul>

<li><span>测试li内部元素定义了display：block的内联元素底部产生空白</span></li>

</ul>

具体详解：这个BUG出现在IE6及以下版本的浏览器。

未定义宽度的浮动或绝对定位会被内部设置了zoom：1撑开：

解决方法：

方法一：设置ul为浮动元素

方法二：设置ul为inline元素

方法三：设置ul的width

代码示例：

BUG重现：

#test { zoom:1; overflow:hidden; border: 1px solid #ddd; background:#eee; }

#test h1 { float:left;}

#test .nav {float:right; background:#aaa;}

#test .nav ul { zoom:1; overflow:hidden;margin:0; padding:0;list-style:none;}

#test .nav li {float:left;margin:0 5px;}

<h1>Doyoe</h1>

<ul>

</ul>

</div>

具体详解：如上述代码，IE6及以下版本浏览器的div,nav会被zoom:1的ul所撑开。

相对定位时父元素overflow属性为auto/hiddle时，失效：

解决方法：给div也设置一个相对定位。

john_sr

CSS兼容处理（二）

公告