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

Consider this example:

考虑一下这个例子:

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

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

HTML:

HTML:

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

CSS:

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

I'm expecting to see this:

我希望看到这个:

But I'm getting this:

但我得到:

It seems that the overflow-x property is being overridden here. Is that what's actually happening? Assuming that I have to keep the overflow-y set to hidden, is there a way around this behavior?

看起来overflow-x属性在这里被覆盖了。这是真的吗?假设我必须将overflowy设置为隐藏，是否有办法绕过这种行为?

2 个解决方案

#1

overflow is intended to be used with elements that are not absolutely positioned. If you want to handle the clipping of an absolutely positioned element, use the clip css property. So to clip on the bottom and top of your containing div, but not the left or right, do this:

溢出的目的是用于不完全定位的元素。如果您想要处理一个绝对定位元素的剪辑，请使用clip css属性。因此，在你的包含div的底部和顶部剪辑，但不是左边或右边，这样做:

#test {
    position:relative;
    margin-left:50px;
    margin-top:50px;
    border:1px solid black;
    height:50px;
    width:50px;
    clip: rect(auto,auto,auto,-11px);
}

Sample: http://jsfiddle.net/treeface/UJNcf/6/

示例:http://jsfiddle.net/treeface/UJNcf/6/

#2

From the CSS3 spec:

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的计算值与它们的指定值相同，只是有些组合是不可能的:如果指定为可见的，而另一个是滚动的或自动的，那么可视的就被设置为auto。溢出的计算值等于overflow-x的计算值，如果overflow-y是相同的;否则，它就是overflow-x和overflow-y的两个计算值。

From this it would seem that some combinations of overflow-x & overflow-y are not valid, and sometimes one will override the other, which would explain what you're seeing here. Though I'm unsure as the wording as a bit unclear and the way browsers actually implement it could vary from the spec (especially when it's hard to decipher).

从这个角度来看，一些overflow-x和overflow-y的组合是无效的，有时一个会覆盖另一个，这将解释你在这里看到的东西。虽然我不太确定，因为措辞有点不清楚，而浏览器实际实现它的方式可能会因规范而异(尤其是在难以解释的情况下)。