標準參考
1. 'overflow'、'overflow-x' 和 'overflow-y'
'overflow' 是 CSS 2.1 規範中的特性，而 'overflow-x' 和 'overflow-y' 則是 CSS basic box model 草案中新加入的特性。
'overflow' 特性指定當一個塊級元素的內容溢出了元素的框（它作爲內容的包含塊）時，是否剪切； 'overflow-x' 決定了對左右邊(水平方向)的剪切，而 'overflow-y' 決定了對上下邊(垂直方向)的剪切。
2. 'overflow'、'overflow-x' 和 'overflow-y' 的默認值
'overflow' 、 'overflow-x' 和 'overflow-y' 的默認值都是 'visible'。
3. 'overflow-x' 和 'overflow-y' 的計算值對
CSS basic box model 草案中規定，'overflow-x' 和 'overflow-y' 的計算值與所設置的值相等，除非這一對值不合理。 如果其中一個特性值被設置成了 'scroll' 或 'auto'，而另一個特性指定值爲 'visible'，那麼 'visible' 會被設置成 'auto'。
如果 'overflow-x' 及 'overflow-y' 的值相同，則 'overflow' 的計算值與前兩者的指定值相同； 否則，它的值是一個 'overflow-x' 和 'overflow-y' 的計算值對。
關於 'overflow' 的詳細資料，請參考 CSS 2.1 規範 11.1.1 Overflow: the 'overflow' property 中的內容。
關於 'overflow-x' 和 'overflow-y' 的詳細資料，請參考 CSS basic box model 草案 11.1. The 'overflow', 'overflow-x' and 'overflow-y' properties 中的內容。
問題描述
當一個元素的 'overflow-x' 或 'overflow-y' 指定值爲 'hidden'，另一個特性的指定值爲 'visible' 時， 該元素最終渲染使用的 'overflow-y' 或 'overflow-x' 值不同。IE6 IE7 IE8 使用 'hidden'，其它瀏覽器使用 'auto'。
造成的影響
此問題可能造成頁面內容顯示不完全，或在不同瀏覽器下最終顯示效果不一致。
受影響的瀏覽器
| 所有瀏覽器 |
|---|
問題分析
CSS basic box model 草案中並沒有說明當 'overflow-x' 和 'overflow-y' 其中一個值爲 'hidden' 另一個值爲 'visible' 時， 該 'visible' 值應該設置爲什麼，各瀏覽器有自己的實現。
我們通過以下的測試用例來說明問題，分析以下代碼：
<!doctype html>
<html>
<head>
<script type="text/javascript">
if(!window.getComputedStyle)
window.getComputedStyle = function(target){
return target.currentStyle;
}
function $(id){return document.getElementById(id);}
window.onload = function(){
for(var i = 1;i<7;i++){
$("info" + i).innerHTML = getComputedStyle($("cont" + i), null).overflowY;
}
}
</script>
<style type="text/css">
#cont1 div, #cont3 div, #cont5 div {
width:150px;
height:100px;
}
#cont2 div, #cont4 div, #cont6 div {
width:50px;
height:25px;
}
.cont {
overflow-y : visible;
padding:10px;
width:100px;
height:50px;
}
.cont, .cont div {
border : 3px solid;
}
</style>
</head>
<body>
<div id="cont1" class="cont" style="overflow-x:scroll; ">
<div></div>
</div>
<div id="info1"></div>
<div id="cont2" class="cont" style="overflow-x:scroll; ">
<div></div>
</div>
<div id="info2"></div>
<div id="cont3" class="cont" style="overflow-x:auto; ">
<div></div>
</div>
<div id="info3"></div>
<div id="cont4" class="cont" style="overflow-x:auto; ">
<div></div>
</div>
<div id="info4"></div>
<div id="cont5" class="cont" style="overflow-x:hidden; ">
<div></div>
</div>
<div id="info5"></div>
<div id="cont6" class="cont" style="overflow-x:hidden; ">
<div></div>
</div>
<div id="info6"></div>
</body>
</html>
以上代碼組合測試了在子元素寬高大於及小於容器、容器 'overflow-x' 值分別爲 'scroll'、'auto' 和 'hidden' 的情況下 'overflow-y' 的渲染結果及計算值。 設置 'overflow-y' 爲 'scroll'、'auto' 或 'hidden'，'overflow : visible' 不影響測試結果。
這段代碼在各瀏覽器中表現如下：
| IE6 IE7(Q) IE8(Q) | IE7(S) IE8(S) | Firefox Chrome Safari Opera |
|---|---|---|
 |
 |
 |
從測試結果中我們能得到以下結論：
- 對於 'overflow-x' 和 'overflow-y' 的組合渲染，所有瀏覽器均依照規範處理；
- 當 'overflow-x : hidden' 且 'overflow-y : visible' 時，IE6 IE7 IE8 中將 'overflow-y' 渲染爲 'hidden'，其它瀏覽器則渲染爲 'auto'；
- 在 IE6 IE7 IE8 中所有容器的 'overflow-y' 計算值都爲 'visible'，而其他瀏覽器中其值都爲 'auto'。
由於 IE6 IE7(Q) IE8(Q) 中存在容器 'width' 或 'height' 的設定值在不足以容納其內容時將被撐大的問題，導致渲染結果與 IE7(S) IE8(S) 的差異， 而從視覺效果上我們也無法判定容器在渲染時 'overflow-y' 使用的是哪個值，這裏猜測情況同 IE7(S) IE8(S)。
對於 'overflow-y' 的計算值與渲染效果不一致，有可能是 IE6 IE7 IE8 對 'overflow-x' 和 'overflow-y' 的實現有問題， 也有可能是 currentStyle 實現的問題，這裏不做過多分析。
解決方案
1.同時設置 'overflow-x' 和 'overflow-y' 的值，不要出現其中之一爲 'hidden' 時，而另一個是 'visible' 的情況；
2.避免編寫依賴指定值爲 'visible' 的 'overflow-x' 和 'overflow-y' 特性的計算值的代碼。