html - IE8ディスプレイ：テーブルの子サイズ

Question

divにカーソルを合わせると、子ボタンにマウスオーバー効果がトリガーされます。ボタンの外側のdivをクリックすると、ボタンonMouseDownもトリガーされます。

コード例：

<DIV style="DISPLAY: table; background-color:#F5DFE8; width:500px;">
    <button onMouseDown="alert('hello')";">Button</button>
</DIV>

自分でテストするためのフィドル：http：//jsfiddle.net/N2c8t/15/

私の尻尾をググってみましたが、これに対する既知の解決策はありますか？明らかにdisplay：tableを使用しない以外は。：）ありがとう！

注：これまでに試したブラウザーであるIE8とIE9でタグ付けしました。

score 0 · Accepted Answer

IEは、実際の設定に関係なく（したがって、div全体を埋める）としてを処理buttonしているように見えます。別の要素との干渉を実行すると、それが解決されました（これが実行可能な解決策である場合）：display: table-rowdisplay

<DIV style="DISPLAY: table; background-color:#F5DFE8; width:500px;">
    <span><button onMouseDown="alert('hello');">Button</button></span>
</DIV>

しかし、おそらくもっと良い（邪魔にならない）、同じ元のhtmlを保持し、疑似要素を追加することdivもそれを解決しました：

div:before {
    content: '';
    display: block;
    width: 0;
}

1 に答える 1