盒模型bug的解决方法


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

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

本文作者:



相关阅读:
初探SQL Server 2008商业智能
Git-cola: 跨平台的 Git 前端
Sendmail邮件服务器快速指南 3
Linux telnet服务开启步骤
CSS滤镜同时过滤文字的问题的解决方法
编写 JavaScript 代码
传智播客学习之java 反射
详细讲解Oracle数据库9i穿过防火墙问题
分享一个自己写的table表格排序js插件(高效简洁)
Freebsd 下运行 QQ For Linux 的方法
将ArrayList绑定到ListBox控件
jQuery教程:data()方法避免内存泄露问题
jquery 表单下所有元素的隐藏
很酷的CSS发光按钮实现方法
快速导航

Copyright © 2016 phpStudy |