为什么“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属性。这是真的发生了什么？假设我必须将overflow-y设置为隐藏，有没有办法绕过这种行为？

Answer 1

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/

Answer 2

来自CSS3 spec：

  

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

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