首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > 网站重构教程 > 正文
Google
盒模型bug的解决方法
来源:网页设计师 作者:阿捷 2006年01月15日 21:43 网友评论:0条 点击:

本文来自:tantek.com

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

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--一场生死之战
收藏此页】【打印】【关闭
 相关文章  我要点评
·定义标题的最好方法
·alt属性和title属性
·在IE中为abbr标签加样式
·HTML4标签的默认样式列表
·如何以及何时使用sIFR
·2005年web标准发展回顾
·CSS的十八般技巧
·常用CSS缩写语法总结

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】