龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

Box Model 盒模型bug的一般解决办法

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
我们定义一个最基本的层boxtest: #boxtest{ border:20pxsolid#60A179; padding:30px; background:#ffc; width:400px; } 标准情况下,这个盒的宽度是:20+30+300+30+20=400px。 但是在IE5.0浏览器中,对盒模型的宽度解
我们定义一个最基本的层boxtest:
#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。
#boxtest{
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; }


精彩图集

赞助商链接