IE8 Дисплей: размер дочернего элемента

Question

Наведение указателя мыши приведет к срабатыванию мыши над эффектом на дочерней кнопке. Нажав на div (снаружи), кнопка также запускает кнопки onMouseDown.

Пример код:

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

скрипка для тестирования самого: http://jsfiddle.net/N2c8t/15/

Been моего хвосту прибегая к помощи прочь, любому известному решению этой проблемы? Кроме того, что просто не использовать дисплей: таблица явно. :) Благодаря!

примечание: с меткой это с IE8 и IE9, так как это те браузеры, которые я пробовал до сих пор.

Answer 1

Похоже, что IE обрабатывает button как display: table-row независимо от того, что фактическое значение display установлено (и таким образом заполняет весь div). Запуск интерференцию с другим элементом solved it (если это является жизнеспособным решением для вас):

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

Но, пожалуй, еще лучше (менее навязчивым), сохраняя тот же оригинальный HTML и добавление псевдо-элемент к div также solved it:

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