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

无论放置什么实际设置（并因此填充整个 div），IE 似乎都将其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