关于html：为什么“ overflow-y：hidden”会影响x轴上溢出的项目的可见性？


Why does “overflow-y:hidden” affect the visibility of items overflowing on the x axis?

考虑以下示例：

http://jsfiddle.net/treeface/P8JbW/

HTML：

1
    <img src="http://ycombinator.com/images/y18.gif" />

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#test {
    position:relative;
    margin-left:50px;
    margin-top:50px;
    border:1px solid black;
    height:50px;
    width:50px;
    overflow-x:visible;
    overflow-y:hidden;
}
img {
    position:absolute;
    left:-11px;
}

我希望看到这个：

enter image description here

但是我得到这个：

enter image description here

似乎在这里overflow-x属性被覆盖。 那是实际情况吗？ 假设我必须将overflow-y设置为隐藏，是否可以解决此问题？

相关讨论

overflow旨在与并非绝对定位的元素一起使用。 如果要处理绝对定位的元素的剪裁，请使用clip css属性。 因此，要剪辑包含的div的底部和顶部，而不是左侧或右侧，请执行以下操作：

1
2
3
4
5
6
7
8
9
#test {
    position:relative;
    margin-left:50px;
    margin-top:50px;
    border:1px solid black;
    height:50px;
    width:50px;
    clip: rect(auto,auto,auto,-11px);
}

范例：http：//jsfiddle.net/treeface/UJNcf/6/

相关讨论

根据CSS3规范：

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的某些组合是无效的，有时一个将覆盖另一个，这将解释您在此处看到的内容。 尽管我不确定措词还不清楚，而且浏览器的实际实现方式可能与规范有所不同(尤其是在难以解读的情况下)。

相关讨论