盒模型bug的解决方法

我们定义一个最基本的层：

boxtest

div.boxtest{ border:20px solid #60A179; padding: 30px; 
background : #ffc; width : 400px; }

标准情况下，这个盒的宽度是:20+30+300+30+20=400px。

但是在IE5.0浏览器中，对盒模型的宽度解释有个bug，它认为300 px是整个盒的总宽度，内容的宽度变成：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; }

Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18