對同一元素設置overflow-x:hidden,overflow-y:visible;屬性值不生效

作者：孫志勇 微博
日期：2016年12月5日

一、時效性

所有信息都具有時效性。文章的價值，往往跟時間有很大關聯。特別是技術類文章，請注意本文創建時間，如果本文過於久遠，請讀者酌情考量，莫要浪費時間。

二、背景

在一次開發過程中，對一個元素設置CSS overflow-x: hidden; and overflow-y: visible; ，理想狀況下，在X軸超出部分隱藏，Y軸超出部分顯示。然而，元素屬性並沒有生效。

三、原因

根據W3C的說法，如下

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

也就是說，如果同一個元素X,Y軸上，其中一個設置了visible，例外一個設置了scoll或者auto，這時候，visible屬性自動轉變為auto。

四、解決方法

在目標屬性外，嵌套父層，一個設置overflow-x: hidden;另外一個設置， overflow-y: visible; 即可。

五、參考鏈接

1. http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
2. http://www.brunildo.org/test/Overflowxy2.html

六、轉載分享

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）

七、如果你覺得此文章對你有幫助，並且想為我買杯咖啡，請掃一掃下面，謝謝。

微信

支付寶