0

当我设置#wrap {height: 0; overflow: hidden}时，内部锚标记应该被隐藏，因此单击阴影区域应该没有任何反应。

我在 Firefox 和 IE 上进行了测试。他们都工作正常。

但是在 Chrome 上，当我点击阴影区域时，我仍然会看到警报窗口。

它是一个 WebKit 错误吗？

这是演示：http: //jsbin.com/ofuxar/3

<div id="wrap">         
    <a href="#" onclick="alert('clicked')">click</a>            
</div>
#wrap {
  height: 0;
  overflow: hidden;
  position: absolute;
  box-shadow: 0 10px 10px 10px black;
}
#wrap a {
  display: block;
  height: 100px;
}
4

1 回答 1

2

您将高度设置为 0，但仍显示其属性。因此，您应用于该元素的任何样式仍将显示。如果你做了一个 1px 的边框，它会显示一个 1px 的边框颜色。最广为人知的情况可能是当您在父 div 中有浮动元素并且父 div 折叠时。保留所有边距和边框元素，但 div 的高度为 0。

正如@Andrew 在评论中所说，您应该使用display:none;隐藏元素。如果我可能会问，您将某些内容设置为的原因是什么height: 0？

编辑 http://jsfiddle.net/bHPFN/如前所述，元素的属性导致它的高度不是 0px，而是将元素的功能维度扩展到 CSS 属性委托的任何内容。

于 2013-04-15T14:10:37.673 回答