css - chrome box-shadow 错误？

Question

当我设置 #wrap {height: 0; overflow: hidden}，里面的 anchor 标签应该是隐藏的，所以点击阴影区域应该没有任何反应。

我在 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;
}

Answer 1

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

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

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