现在的位置: 首页 >> 网页设计 >> XHTML >> 盒模型bug的解决方法
添加时间:2005-9-8 来源:网教中国 作者: 阿捷
盒模型bug的解决方法

本文来自:tantek.com,也可以阅读《网站重构》第225-235页了解更多 。

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

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; }


上一篇:用!important解决IE和Mozilla的布局差别 下一篇:表格对决CSS--一场生死之战
大部分文章摘自网上,如有侵犯您的权益请与我们联系,我们会第一时间进行处理,谢谢! [ 打印文章 ] [ 关闭窗口 ]
推荐文章
·第3天:定义语言编码
·第8天:CSS布局入门
·第9天:第一个CSS布局实例
·第10天:自适应高度
·第12天:校验及常见错误
·理解表现和结构相分离
·web标准的投资回报(ROI)
·表格对决CSS--一场生死之战
·CSS的十八般技巧
·用CSS定义标题的几个实例
相关文章
 
最新文章
·第1天:选择什么样的DOCTYPE
·第2天:什么是名字空间
·第3天:定义语言编码
·第4天:调用样式表
·第5天:head区的其他设置
·第6天:XHTML代码规范
·第7天:CSS入门
·第8天:CSS布局入门
·第9天:第一个CSS布局实例
·第10天:自适应高度
Google