IE8 在下面这种情况有个底部补丁无效的Bug
<style type="text/css">
* { margin:0px; padding:0px; } body { margin:30px; }
.box { width:200px; height:200px; padding:10px; border:1px #CCCCCC solid; margin:10px; overflow:auto; }
.cnt { width:100px; height:300px; padding:10px; border:1px #FF0000 solid; line-height:1.5; }
</style>
<div class="box">
<div class="cnt">测试文字123</div>
</div>
解决方法：
添加ie8的条件注释 加上下面的css
.box:after { content:"."; }
after伪类添加任意内容
.box { color:#fff; font:10px/8px "宋体"; }
调整字体和行高，使空白高度正好等于.box的padding，字体颜色等于背景色使添加的内容看不见
.cnt { font:12px/1.5 "宋体"; color:#000; }
重置.cnt的字体和颜色
*区别ie8的css hack: /9 和其他方法在我这个ie8 sp3里都测试无效，所以还是用更稳定的条件注释方法
完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0px; padding:0px; } body { margin:30px; }
.box { width:200px; height:200px; padding:10px; border:1px #CCCCCC solid; margin:10px; overflow:auto; }
.cnt { width:100px; height:300px; padding:10px; border:1px #FF0000 solid; line-height:1.5; }
</style>
<!--[if IE 8]>
<style type="text/css">
.box:after { content:"."; }
.box { color:#fff; font:10px/8px "宋体"; }
.cnt { font:12px/1.5 "宋体"; color:#000; }
</style>
<![endif]-->
</head>
<body>
<div class="box">
<div class="cnt">测试文字123</div>
</div>
</body>
</html>
不过，还有更好的办法：
使用 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 就可以避免这个ie8的专有bug
这也是我推荐的做法
扫一扫
110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
