overflow的一些小问题

overflow-x和overf-y同时使用的问题

如果overflow-x和overflow-y二者的值相同,等同于overflow; 如果二者值不同,其中一个被赋予visible;另一个被赋予auto,hidden,scroll,其中visible会被重置为auto。

table中的问题

table中td设置尺寸和overflow:hidden不起作用,此时需要table为table-layout:fixed;才会起作用

IE7下的button padding问题

overflow:scroll的出现

所有的scroll均是来自于html,不是body。证明就是body本省是有.5em的的margin。可是滚动条确实贴着html的。

ie7及以下

默认右侧始终有一个scroll的条。即使你的内容一个字没写。所以他的默认css的overflow-y:scroll

IE8+

默认是overflow:auto

chrome和其他浏览器

在这里,奇葩的是chrome了。

chrome下获取滚动高度是document.body.scrollTop,
而其他的是document.documentElement.scrollTop,

所以推荐的兼容写法是:

var scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);

padding-bottom缺失

在非chrome浏览器中。如果滚动区域写了上下padding,那么padding-bottom会缺失

滚动条导致布局问题

滚动条是会占据宽度的,所以最好是把宽度预留足够。


Hockor
647 声望38 粉丝

hey man。I'm Hockor!