張鑫旭-overflow的細節筆記

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會缺失

滾動條致使佈局問題

滾動條是會佔據寬度的，因此最好是把寬度預留足夠。