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><a href="...">常用手册</a></li>
<li><a href="...">常用手册</a></li>
<li><a href="...">常用手册</a></li>
<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;}
<div id="test">
<h1>Doyoe</h1>
<div class="nav">
<ul>
<li><a href="...">常用手册</a></li>
<li><a href="...">常用手册</a></li>
<li><a href="...">常用手册</a></li>
</ul>
</div>
</div>
具体详解:如上述代码,IE6及以下版本浏览器的div,nav会被zoom:1的ul所撑开。
- 相对定位时父元素overflow属性为auto/hiddle时,失效:
解决方法:给div也设置一个相对定位。
相关代码:
div { overflow:auto; width:260px; height:80px; border: 1px solid #ddd; }
p { position:relative; margin:0; }
<div>
<p>123456</p>
<p>123456</p>
</div>
具体详解:如上述代码,在IE7及更早浏览器下你会看到滚动条将无法工作。在P标签上加一个相对定位即可。
- 在谷歌浏览器中应用transition时页面闪动:
解决方法:-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;