为什么"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适用于非绝对定位的元素.如果你想处理一个绝对定位的元素的剪裁,使用的clipCSS属性.因此,要剪切包含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规范:

计算的值overflow-x和overflow-y它们的指定值相同,除了某些组合visible是不可能的:如果指定了一个visible而另一个是scroll或auto,则visible设置为auto.计算值overflow等于overflow-xif 的计算值overflow-y相同; 否则它是对计算的值的overflow-x和overflow-y.

从这看起来似乎某些overflow-x&的组合overflow-y是无效的,有时一个会覆盖另一个,这可以解释你在这里看到的内容.虽然我不确定措辞有点不清楚,浏览器实际实现的方式可能会有所不同(特别是当它难以破译时).