html - 为什么 "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;
}

我期待看到这个:

但是我得到了这个:

这里好像override了overflow-x属性。这是实际发生的事情吗？假设我必须将 overflow-y 设置为隐藏，是否有解决此问题的方法？

Answer 1

来自CSS3 spec :

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 的一些组合似乎是无效的，有时一个会覆盖另一个，这将解释你的意思看到这里。虽然我不确定，因为措辞有点不清楚，而且浏览器实际实现它的方式可能与规范不同(尤其是当它难以破译时)。