对同一元素设置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许可证）

七、如果你觉得此文章对你有帮助，并且想为我买杯咖啡，请扫一扫下面，谢谢。

微信

支付宝