首 页 | 模 板 | 学 院 | 源 码 | 书 籍 | 壁 纸 | 字 体 | JS脚本 | FLASH源码 | 软 件 | 矢 量 | 服务器软件 | 其 它 | 论 坛 |
设为主页
加入收藏
联系站长
平面设计 | 网页制作 | 程序编写 | 数 据 库 | 媒体动画 | 网络冲浪 | 服务器相关 | 站长乐园 | 业界动态 |
当前在线
广告:P4服务器电信机房6999/年即送产权 | 疾风下载
广告图片加载中.......
盒模型bug的解决方法
2006-3-28 7:56:52  作者:阿捷  来源:网页设计师 网友评论 0 条 论坛
  

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

>> 相关文章

关于网站 | 客服中心 | 服务条款 | 友情链接 | 广告联系 | 本站历程 | 网站导航

吉ICP备05000107号