Internet Explore(简称IE)是目前使用得最多的浏览器,在国内几乎是一统天下。IE6以前的版本对“盒模型(box model)”执行了错误的解释。如果一个盒的宽度为200px,边距为20px,边框大小为20px,如下CSS定义:
div { width : 200px; padding: 20px; border:20px solid #60A179; }
根据W3C的css规范来计算的话,整个盒的宽度是: 内容(200px) +边距 (20px+20px) + 边框(20px+20px) = 280px. 然而IE6以前的版本认为:内容 +边距 + 边框 = 200px.所以内容的真正宽度为:200-20-20-20-20=120px 。如下图所示:
为了修复这个bug,可以采用一个技巧:即增加一个IE5和IE5.5不能解释的声音属性"voice-family",读到这个定义时浏览器就不再继续阅读,认为宽就是300px,但而其他符合标准的浏览器会继续阅读,并执行第二个真实值200px。如下CSS定义: div { width : 300px; padding: 20px; border:20px solid #60A179; voice-family : "\"}\""; voice-family :inherit; width : 200px; }
当然了,还有其他方法(英文资料)解决这个bug。关于盒模型你也可以浏览阿捷网站上的盒模型bug的解决方法这篇文章。阅读更多的CSS书籍
此文禁止转载,但是您可以以超级链接的方式链接到这篇文章。