大家好，欢迎来到IT知识分享网。
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
这也是我推荐的做法
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/24548.html
