对同一元素设置overflow-x:hidden,overflow-y:visible;属性值不生效
Posted 小向光
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了对同一元素设置overflow-x:hidden,overflow-y:visible;属性值不生效相关的知识,希望对你有一定的参考价值。
- 问题
在一次开发过程中,对一个元素设置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’.
也就是说,overflow-x和overflow-y的计算值跟给定的值相同,除了某些跟’visible’值的不合理组合:如果一个其中一个属性的值被赋为’visible’,而另一个被赋值为’scroll’或’auto’,那么’visible’会被重置为’auto’。overflow的计算值与overflow-x相等(如果overflow-y相同的话);否则就是一对overflow-x和overflow-y的计算值。
其实另一个值设置为hidden的时候,visible也会被重置为auto。
- 解决办法
在目标属性外,嵌套两层父层,最上层父类设置overflow-y: visible;
,上层父类overflow-x: hidden; overflow-y: visible;
相关文章:
RV1001: 各浏览器中当 ‘overflow-x’ 和 ‘overflow-y’ 一个值为 ‘hidden’ 另一个值为 ‘visible’ 时的组合渲染结果存在差异
以上是关于对同一元素设置overflow-x:hidden,overflow-y:visible;属性值不生效的主要内容,如果未能解决你的问题,请参考以下文章
Flexbox 不尊重 overflow-x: hidden on body (Safari / iOS webkit)