CSS溢出属性

1657

六

2009

发布者: seasun

网页中的每一个元素都是矩形盒模型。盒模型的大小，定位及行为都可以通过CSS来控制。它的行为，我是说当处理这个盒模型的时候，它里面的及周边的内容都会发生变化。例如，如果您不给盒模型设置它的高度，那么它的高度就会随着内容的增加而自适应。那么如果您给高度或者宽度设置一个固定的值，依然会自适应吗？这就是为什么需要CSS overflow属性的原因，它会指引您如何处理这个问题。

overflow属性拥有四个值: visible (默认), hidden, scroll, 和 auto。还有没有被广泛采用的姐妹属性 overflow-y 和 overflow-x。

让我们来看看并讨论下它们之间的不同通途和兼容性。

Visible

如果您没有设置overflow属性，那么它的默认值就是visible。所以通常而言，您没有必要去故意设置这个值，除非您是为了重置在某个地方已经赋值过的值。

最需要记住的事情是，即使盒模型以外的内容是可见的，但页面中的内容在这里却没有起作用。例如:

一般来说，无论网页中的任何地方，只要存在文本内容的您都不应该设置它的固定高度，这样就不会出现这个问题了。

Hidden

与默认可见值相反的就是 hidden 了。好不夸张的说，它会隐藏超出来自这个盒模型内的任何内容。

这对于使用动态内容及溢出可能导致的严重的布局问题显得非常有用。然后，务必记住，这种方式隐藏的内容是完全无法访问的(查看源代码倒是可以)。因此，如果用户有自己的字体大小默认值，并且还远远大于我们的预想值，就很有可能导致文本内容会完全隐藏而无法查看。

Scroll

设置盒模型的overflow值为scroll可以渲染在盒模型之外隐藏的内容，但这将导致在盒模型的内部显示滚动栏，调节滚动条才能够查看内容。

值得注意的是，无论怎样该值都会导致您同时得到横向及纵向滚动条，虽然您仅仅的需要的是这个或另一个方向的。

Auto

overflow的auto值跟scroll值非常类似，它唯一解决的是当您不需要滚动条的时候它是不会出现的。

闭合浮动元素Float Clearing

奇怪的是，另一个很受欢迎的溢出设置居然是float clearing。设置溢出并不会清除元素中的浮动，而是它自己。这意外着元素的overflow值设置了 (auto 或 hidden), 它就会围绕着子元素的增大而增大随之浮动 (而不是崩溃), 假设高度没有设置。像这样:

关于这点及浮动的更详细的描述请查看 All About Floats.

跨浏览器的关注

像大多数的CSS属性一样，overflow也有不少的跨浏览器问题。如下:

滚动框出现在盒模型的内部还是外部?

Firefox 将它们放置在外部而IE则是在内部。我认为只有IE是真正正确处理的 (它就应该在内部).

请务必考虑到这一点的确有很大的差别。

IE 8 扩大了盒模型中的错误 (IE 8 expanding box bug)

IE中还有许多有趣的新的漏洞，包括非常严重隐藏整个网页的一些。点击这里查看更多细节.

打破浮动布局 (Breaking floated layouts)

IE 6, 7 和 8 都搞砸了overflow 的默认值，使之为 visible，并扩展了盒模型的垂直方向的内容自适应 (类似图片)。这对于基于浮动栏的布局尤其痛苦，单一的扩展栏会促使其它栏产生下沉，并导致非常严重的布局问题。

滚动条可以用CSS来定义样式吗?

在老版本的IE中曾经是被支持的，但现在已经被终止了。像所有的表单元素那样，滚动条已经不能通过CSS来定义样式。我没有任何特别的意见来评价这究竟是好的或坏的事情，但我可以肯定地说网站中到处布满了滚动条那是非常丑恶和严重的。如果您想寻求定义滚动条的风格的解决方案，那么您可以考虑使用JavaScript。
无论您是否需要，IE总是会显示垂直方向的滚动条。这可以很好的防止横向跳跃 (preventing horizontal jumps), 但这并不总是可取的。您可以通过设置 body 元素的 overflow 值 auto 来移除IE中的这个问题。