Html “为什么？”；溢出-y：隐藏；是否影响x轴上溢出的项目的可见性？

考虑这个例子：

HTML：

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

#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设置为隐藏，有没有办法避免这种行为？

来自：

overflow-x

和

overflow-y

的计算值与它们的指定值相同，只是一些与

可见的组合是不可能的：如果一个指定为
可见
，另一个指定为
滚动
或
自动
，然后
visible
设置为
auto
。如果
overflow-y
相同，则
overflow-x
的计算值等于
overflow-y
的计算值；否则它是
overflow-x
和
overflow-y
的一对计算值

由此看来，
overflow-x
&
overflow-y
的某些组合是无效的，有时一个组合会覆盖另一个组合，这可以解释您在这里看到的情况。虽然我不确定，因为措辞有点不清楚，而且浏览器实际实现它的方式可能与规范不同（特别是在难以破译的情况下）。
overflow
用于非绝对定位的元素。如果要处理绝对定位图元的剪裁，请使用。因此，要剪裁包含div的底部和顶部，而不是左侧或右侧，请执行以下操作：

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

示例：
这非常有趣。我可以确认这在Chrome9、FF3.6和Safari5中都发生过。如果有人能检查这是否发生在不同的IE版本中，这将有助于了解。IE 7是相同的。IE6显示了整个图像。@Alohci:幸运的是，我不再需要编写IE6；-）那很好。现在，如果我们可以向客户指出IE7的市场份额甚至低于IE6，我们也不应该为此编写代码，那么我们将取得真正的进展……这是在最新的Chrome上发生的。CSS开发得这么差吗？谢谢你！解决方法正是我想要的。哇，我从来没有听说过
clip
，太棒了。也许这对OP有帮助，但它没有回答他的问题。安德鲁·马歇尔的答案#答案-5072540确实如此。仅供参考：
clip
已被弃用。非常有趣…谢谢你的信息。顺便说一句，我还找到了这个有用的页面，显示了所有组合是如何相互影响的：