标题: Box Model 盒模型bug的一般解决办法
lonjew
元帅
Rank: 1



UID 73191
精华 1
积分 30615
帖子 14941
威望 3
金币 14931
热心 12
阅读权限 100
注册 2008-1-28
状态 离线
Box Model 盒模型bug的一般解决办法

我们定义一个最基本的层boxtest:

Example Source Code
#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。

Example Source Code
#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; }

网友 lonjew 签名 - 网友社区 ==
顶部
[广告] 免费域名(Free Subdomain) 免费空间(Free hosting) PR查询(Google Pagerank)



当前时区 GMT+8, 现在时间是 2008-7-19 14:57
信产部ICP备案:京ICP备05066424号 北京市公安局网监备案:1101050648号

Powered by Discuz! 5.5.0
清除 Cookies - 联系我们 - 网友俱乐部 - Archiver - WAP