| 网站首页 | 建站学院 | 资源下载 | 建站教程 | 图片素材 | 网贝社区 | 
您现在的位置: 网贝建站 >> 建站学院 >> 网页设计 >> XHTML >> 正文 用户登录 新用户注册
专 题 栏 目
最 新 热 门
最 新 推 荐
相 关 文 章
伴随着Web标准发展
表格对决CSS--一场生死之
web标准的投资回报(ROI)
web标准,我们去向何方?
你应该关注web标准的真正
web标准的商业价值
学习CSS的10大理由
通向web标准之路
CSS比表格更难吗?
采访Eric Meyer的10个问
盒模型bug的解决方法         ★★★
盒模型bug的解决方法
作者:阿捷 文章来源:w3cn|http://www.w3cn.org/ 点击数: 更新时间:2005-1-15 18:19:15

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

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)