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

Question

考虑这个例子：

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

HTML：

<div id="test">
    <img src="http://ycombinator.com/images/y18.gif" />
</div>

CSS：

#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;
}

我期待看到这个：

但我明白了：

这里似乎覆盖了overflow-x 属性。那是实际发生的事情吗？假设我必须将溢出-y 设置为隐藏，有没有办法解决这种行为？

Answer 1

来自CSS3 spec：

overflow-x 和 overflow-y 的计算值与其指定的值相同，只是与visible 的某些组合是不可能的：如果一个指定为visible，另一个指定为scroll 或auto，然后将visible 设置为auto。如果overflow-y 相同，则overflow 的计算值等于overflow-x 的计算值；否则为overflow-x 和overflow-y 的计算值对。

由此看来，overflow-x 和 overflow-y 的某些组合似乎无效，有时其中一个会覆盖另一个，这可以解释您在此处看到的内容。虽然我不确定措辞有点不清楚，浏览器实际实现它的方式可能与规范有所不同（尤其是当它难以破译时）。

Answer 2

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

#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/