多套一层使 padding、border 兼容

作者:leen 来源:千一网络(原创) 日期:2006-4-28

我们知道 IE、Opera 对样式表的解释比较相似,而 Netscape、FireFox 又有另外的一套解释(W3C)。之前,已经有人谈有这两派浏览器对 padding、border 的解释。你到底有多宽?

既然浏览器间无法从根本上兼容,那么我们只有从技巧上让之兼容(也可以放弃对所有浏览器的支持)。

看下面一个例子,就是通过多套一层 div 使效果相同。如果你使用的是 IE 或 Opera,你会发现三个色块的宽度一样,如果你使用的是 Netscape 或 FireFox,你会发现第一个色块要比下面两个色块宽,这就是边框在作怪。


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

原理很简单,外层 div 确定总的宽度,内层 div 确定边框,由于内层 div 没有指定宽度(也不能指定宽度),所以即使它有边框,也会自动调整以适应外层 div。对于 padding 也是一样的道理,把 border 换成 padding 就可以了。

相关文章