Question

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

我在Firefox和IE上测试过它。它们都很好。

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

这是一个WebKit错误吗？

<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中有浮动元素并且父div崩溃时。保留所有边距和边框元素，但div的高度为0。

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

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

镀铬盒阴影bug？

1 个答案: