为什么“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设置为hidden，有什么方法可以解决这种行为问题吗？

- treeface

---

这非常有趣。我可以确认在Chrome 9、FF 3.6和Safari 5中发生了这种情况。如果有人能够检查各种IE版本是否也出现了这种情况，那将是很有用的信息。 - Andrew Marshall

IE 7是一样的。IE6显示整个图片。 - Alohci

@Alohci：幸运的是，我不再需要编写IE6的代码了;-) - treeface

好的。现在，如果我们能够向客户指出IE7的市场份额甚至比IE6还要低，我们也不应该为其编码，那么我们将会取得真正的进展... - Alohci

这是在最新的 Chrome 上发生的。CSS 开发得如此糟糕吗？哈哈 - Ian Steffy

Answer 1

根据CSS3规范：

overflow-x和overflow-y的计算值与它们的指定值相同，但某些与visible组合的情况不可能：如果一个被指定为visible且另一个是scroll或auto，则将visible设置为auto。 如果overflow-y与overflow-x相同，则overflow的计算值等于overflow-x的计算值；否则，它是overflow-x和overflow-y的一对计算值。

这表明某些overflow-x和overflow-y的组合是无效的，并且有时其中一个将覆盖另一个，这解释了您在此处看到的情况。尽管措辞有点不清楚，而且浏览器实际实现可能与规范有所不同（特别是当难以解释时）。

- Andrew Marshall

---

非常有趣……感谢提供信息。顺便一提，我也找到了这个有用的页面，展示了所有组合如何相互影响：http://www.brunildo.org/test/Overflowxy2.html - treeface

Answer 2

overflow 应该用于非绝对定位的元素。如果要处理绝对定位元素的裁剪，请使用 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);
}

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

- Keltex

---

谢谢您！解决方法正是我正在寻找的。 - treeface

哇，我从来没有听说过 clip，太棒了。 - Andrew Marshall

也许这可以帮助楼主，但它并没有回答他的问题。安德鲁·马歇尔的回答 #answer-5072540 回答了他的问题。 - yunzen

FYI：clip已被弃用。MDN - salsbury