对同一元素设置overflow-x:hidden,overflow-y:visible;属性值不生效
2018-01-03 21:50
375 查看
问题
在一次开发过程中,对一个元素设置CSS overflow-x: hidden; and overflow-y: visible; ,理想状况下,在X轴超出部分隐藏,Y轴超出部分显示。然而,元素属性并没有生效。
原因
根据W3C的说法,如下
也就是说,overflow-x和overflow-y的计算值跟给定的值相同,除了某些跟’visible’值的不合理组合:如果一个其中一个属性的值被赋为’visible’,而另一个被赋值为’scroll’或’auto’,那么’visible’会被重置为’auto’。overflow的计算值与overflow-x相等(如果overflow-y相同的话);否则就是一对overflow-x和overflow-y的计算值。
其实另一个值设置为hidden的时候,visible也会被重置为auto。
解决办法
在目标属性外,嵌套两层父层,最上层父类设置
相关文章:
RV1001: 各浏览器中当 ‘overflow-x’ 和 ‘overflow-y’ 一个值为 ‘hidden’ 另一个值为 ‘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;属性值不生效
- CSS3 overflow属性默认为visible,父元素高度为0,如果子元素有内容高度不为0也会显示,需将overflow设为hidden
- float 浮动 《1》clear:both清除浮动 ;《2》设置父元素overflow:hidden来清除浮动
- 设置inline-block元素的overflow:hidden意外增加元素总体高度的问题
- 子div设置float,父div不再增加高度,需要给父元素加个overflow:hidden属性
- inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
- 当设置父元素overflow: hidden;子元素超出父元素时没有隐藏
- inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
- 清除浮动2-父元素设置overflow:hidden
- position:absolute与overflow:hidden,解决子元素设置position:absolute后父元素 overflow:hidden无效的问题
- IE8中超高元素设置透明度未生效bug
- 父元素设置固定宽度并设置overflow:scroll,如何让子元素撑开父元素
- JavaScript DOM 中创建元素 用 setAttribute()函数设置属性值
- JavaScript DOM用document.createElement()生成元素,用seAttribute()函数设置属性值
- inline-block元素overflow:hidden对齐问题
- 在移动端设置overflow:hidden,无效?
- 转载:IE6,IE7下设置body{overflow:hidden;}失效Bug
- JavaScript DOM 中创建元素 用 setAttribute()函数设置属性值
- css overflow(visible auto hidden scroll)教程
- JavaScript DOM用document.createElement()生成元素,用seAttribute()函数设置属性值