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 内に float 要素があり、親 div が折りたたまれた場合です。margin 要素と border 要素はすべて保持されますが、div の高さは 0 です。

@Andrew がコメントで述べたように、display:none;要素を非表示にするために使用する必要があります。何かを に設定する理由は何height: 0ですか?

編集 http://jsfiddle.net/bHPFN/前に述べたように、要素の属性により、要素の高さが 0px になるのではなく、要素の機能的な次元が CSS 属性が委任するものに拡張されます。

于 2013-04-15T14:10:37.673 に答える