当前位置: 主页->网页制作->css层叠样式表->正文
相关文章
·web标准的商业价值
·CSS2盒模型的3D示意图
·通向web标准之路
·初学web标准的几个误区
·XHTML基础问答
·怎么改善现有网站
·为什么要建立网站标准
·WEB标准
·css布局中的居中问题
·为什么要抛弃HTML
·表格对决CSS--一场生死之战
·学习CSS的10大理由
·简单实用的网页表格特效
·谈Filter在网页中的运用

盒模型bug的解决方法

http://www.yy0736.com 加入日期:2004.11.06 点击数:

[大字体 中字体 小字体]

本文来自: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; }

作者:阿捷 出处:网页设计师

   

上篇:web标准的商业价值 下篇:


[夜鹰论坛] [我要留言] [关闭窗口] [ ][TOP]