慎用 overflow

overflow有问题吗?没问题。那为什么说要慎用呢?因为有时会导致一些问题。。。

关于overflow:auto的,很多人贪他书写方便,直接用来清除浮动。但是Firefox使用overflow:auto会产生focus,引用网友fireyy的评论

我想这是FF浏览器的一个“可用性和亲和力”(usability/accessibility)的设定,当设定了overflow:auto或者 overflow:scroll的元素不能完全显示内容的时候(出现滚动条),针对于键盘使用者,就可以focus到那个元素,使用键盘的方向键去控制局部的滚动。

那用关于overflow:auto清除浮动有什么问题呢?当你鼠标坏掉时,用键盘按Tab键去网上看新鼠标时就会发现,按了N+N下Tab键都到不了想要到的链接,因为overflow:auto太多了。XD 想想老外为什么要写那样复杂的clearfix吧,难道他们的研究会比我们少吗?

那关于overflow:hidden呢?本来它是没问题滴,可是我们伟大的M$不喜欢它,早在04年POPO发现overflow:hidden会导致中键失效

如果定义了嵌套区块元素(比如<div> )的overflow溢出样式,在这个区块上方,鼠标中键将失效,这主要是存在于IE中, Mozilla/Firefox/Opera普遍使用自定义的mouse guesture,所以不存在这个问题或者根本就谈不上这个问题。比如用IE浏览Plod的时候,在中间内容部分按鼠标中键(假设你的鼠标有中键),那个上下滚屏箭头没有出现吧……

中键的功能估计用得比较少,一般出现N+N屏的页面,才会用中键来快速拉动,例如用IE6打开163(不知道改掉了没^^)试一下,虽然IE6里那个不可爱的四角样子比较难看,但是也不能因为它样子有问题就把它去掉,哪怕你是不小心的。因为真的有人会用到,上次跟一个做论坛的朋友有讨论到这个问题,是普通网友提到的。要是导致别人以为中键坏了可就不好^^。顺便说下,你们大胆用,因为我装了罗技的鼠标驱动,中键功能已经更新,就算IE也米问题。再再顺便说下,Firefox的中键那个图可以定制。XD

这些细小的问题可能你认为影响并不大,的确,它的影响并不大,可是Web标准本身的意义是什么呢?

扩展阅读:Accesskey引起的一点点思考
引起的相关问题:Firefox2中输入框丢失光标bug

This entry was posted in Web开发 and tagged , , , . Bookmark the permalink.

12 Responses to 慎用 overflow

  1. heiyo @ 2007-08-13 at 22:40

    原来….罗技鼠标这么强悍的….
    清除还是要写个高度 然后margin-top:-高度 ,这样应该没问题了吧?

  2. yanglei @ 2007-08-14 at 09:10

    我滴鼠标也是罗技的、键盘也是,滑轮可以左右晃动,可我没发现它有啥用丫

  3. greengnn @ 2007-08-31 at 16:50

    有丢失的评论

  4. aoao @ 2007-09-01 at 03:48

    =.= 如果在晚上早点时在旧版的评论就可能,htaccess出问题,apache又没办法重启,自动跳到旧版可评论的。。

  5. onebiys @ 2007-09-22 at 18:59

    我对整个#container(里面包括较复杂的层关系)使用 overflow:auto

    FF的显示效果是整个页面放在了一个滚动筐里面,也就是我所要的效果,
    可为什么ie却显示不正常,只有某些东西可以滚动,大部分东西都固定在页面上不动了.
    怎样使ie的显示效果同ff那样呢?

  6. aoao @ 2007-09-22 at 20:59

    to:onebiys 不是很清楚你想要的效果。有没有在网上的效果可以看到。。

  7. leshan @ 2007-12-11 at 14:41

    那有什么好的清楚浮动?

  8. aoao @ 2007-12-12 at 18:05

    @leshan 最古老也是最有效的 clearfix

  9. Cindy @ 2008-05-21 at 08:59

    可访问性和可用性还是不一样的。。。网站设计也应给身体有缺陷的人带来方便。无论是热键还是文字缩放,我们开来无所谓的功能,对于他们意义是不同的。

  10. oneboys @ 2009-03-25 at 12:01

    汗,在网上游荡,进入这篇文章,仔细的看了一遍,再仔细的看了回复(5#)。
    居然发现我在07年就看过这篇文章了,但是居然一点印象都没有。估计当时压根没有看懂。
    至于自己的那个问题,我现在自己看也是云里雾里,不知当初发生了什么问题。

    —-
    我现在ff下清楚浮动,也经常用overflow:hidden;还有解决margin重叠问题,也用这个方法。
    没想到还有ie中键问题…
    以后有凑巧的,试一下这个问题。

  11. abc @ 2009-05-25 at 20:38

    可是有多少人用到滚屏呢?眼睛很不舒服的

  12. Pingback: 关于overflow:hidden « 堂主,WEB前端开发技术

onebiys 回复 点击这里取消回复。

(必填)

(必填)