溢出：隐藏在 Google Chrome 中无法按预期工作答案

【问题标题】：Overflow:hidden not working as expected in Google Chrome溢出：隐藏在 Google Chrome 中无法按预期工作
【发布时间】：2011-06-11 06:08:51
【问题描述】：

我遇到了“溢出：隐藏”CSS 属性的问题。

在 Firefox、IE8 和 Safari 5 中，当我将此属性应用于用于在我的内容顶部包含广告横幅（如 AdSense 排行榜或 Flash）的 div 时，Chrome 中仍然会发生一些重叠被调整到足够小以至于它们发生碰撞。

在 Firefox 和 IE8 中，它按预期工作，所有内容都完全隐藏在右侧边栏后面。在 Chrome 中，实际内容是隐藏的，但它被替换为仍然重叠并挡住侧边栏的白色背景。

我已链接到显示问题外观的屏幕截图。有什么我可以解决的吗？！

【问题讨论】：

【解决方案1】：

我在 chrome 中遇到了以下 css 的问题。它根本不起作用。

div.hidden {
    margin:0px 0px 10px 0px;
    overflow-y:hidden;
}

现在，我将上面的 CSS 更改为，

div.hidden {
    margin:0px 0px 10px 0px;
    overflow-y:hidden;
    position:relative;
}

它对我来说很好用。

【讨论】：

【解决方案2】：

您的 CSS 或布局可能存在问题。

您可以通过将侧边栏上的 z-index 更改为大于广告的 z-index 来回避该问题，这将导致它无论如何都呈现在添加的上方。确保为位置定义了一些值。

【讨论】：

好的，谢谢。我想知道为什么它只发生在 Chrome 中。我确实尝试过使用 z-index，但我可能将它设置在错误的位置。侧边栏中的所有内容都需要具有更高的 z-index 还是仅需要侧边栏 div 本身？
伙计，这很奇怪——我在使用 YUI2.9 动画创建 Accordion 水平菜单时遇到了同样的问题。溢出：隐藏；在 Chrome 中隐藏内容，但内容持有者的尺寸正是隐藏内容的宽度：/