0px 与 1px 有时有质的差别

我们对：

使用不同的样式表，得到比较结果如下，其中：

• 粗体为指定的样式；
• IE 为 Microsoft Internet Explorer 浏览器；
• NS 为 Netscape 浏览器；
• Opera 为 Opera 浏览器；
• FF 为 FireFox 浏览器。
• 全显指完全显示内容；
• 全隐指完全隐藏内容；
• 1px 指只显示一像素宽（或高）的内容。

直接查看结果。

width:0px;
IE 全显
NS 全显
Opera 全显
FF 全显

width:0px;overflow:hidden;
IE 全隐
NS 全显
Opera 全隐
FF 全隐

width:1px;
IE 全显
NS 全显
Opera 全显
FF 全显

width:1px;overflow:hidden;
IE 1像素
NS 1像素
Opera 1像素
FF 1像素

height:0px;
IE 全显
NS 全显
Opera 全显
FF 全显

height:0px;overflow:hidden;
IE 全显
NS 全隐
Opera 全隐
FF 全隐

height:1px;
IE 全显
NS 全显
Opera 全显
FF 全显

height:1px;overflow:hidden;
IE 1像素
NS 1像素
Opera 1像素
FF 1像素

说明两点：一、以上测试的 DOCTYPE 为 XHTML 1.0 Transitional；二、以上结果很怪异，但经过多次实验验证无误。

总结一下：

• 在没有指定 overflow:hidden 的时候，不管是 0px 还是 1px，不管是指定 width 和 height，都显示全部内容。
• 在指定 overflow:hidden 的时候，width 或 height 大于 0px，比如示例中的 1px，则显示指定宽度或高度的内容，比如示例中的 1px。
• 在指定 overflow:hidden 的时候，width 为 0px，NS 显示全部，其它浏览器全部不显示。
• 在指定 overflow:hidden 的时候，height 为 0px，IE 显示全部，其它浏览器全部不显示。

由此可见，在指定 overflow:hidden 的时候，NS 和 IE 分别有一次“怪异”的表现。

网友评论

• 呵呵 这是细心啊（125.71.*.* 2007-07-12 22:30:26）