日期:2013-10-28 浏览次数:21230 次
本文来自:CSS/Examples/boxmodelhack.html">tantek.com,也可以阅读《网站重构》第225-235页了解更多。
我们定义一个最基本的层:
div.boxtest{ border:20px solid #60A179;padding: 30px;background : #ffc;width : 300px;}标准情况下,这个盒的宽度是:20+30+300+30+20=400px。
但是在IE5.0浏览器中,对盒模型的宽度解释有个bug,它认为300px是整个盒的总宽度,内容的宽度变成:300-20-30-20-30=200px。
为了弥补这个bug,采用一个技巧:即添加一个IE5不能解释的声音属性"voice-family",读到这个定义时浏览器就不再继续阅读,认为宽就是400px,但而其他符合标准的浏览器会继续阅读,并执行第二个真实值300px。
content
div.content{border:20px solid #60A179;; padding:30px;background: #ffc;width :400px;voice-family : "\"}\"";voice-family :inherit;width : 300px;}同样,在Opera7.0以前的浏览器也有这样的解析bug。但我们并不需求使用伪值,有更简单的办法处理这个问题:html>body .content { width :300;}