Изображение в кнопке: странное пространство

Question

Первый результат в Firefox 4 Beta 8:

Кнопка против Div http://b.imagehost.org/0419/buttonSpace.png

Первый показанный элемент - button с img, второй - div с img. Как вы можете видеть в первом случае, между границей img и границей button есть какое-то странное пространство. Интересно, как я могу это удалить.

Здесь файл CSS:

* {
    margin: 0;
    padding: 0;
}

button, img, div {
    border: 1px solid black;
}

img {
    display: block;
}

Answer 1

Тестирование вышеуказанного тестового примера в других браузерах показало, что это, вероятно, не проблема CSS, а ошибка в Firefox. После небольшого исследования я нашел этот отчет об ошибке: Ошибка 140563 - <button> игнорирует стиль CSS padding:0

В этом отчете об ошибке есть исправление проблемы:

button::-moz-focus-inner {padding:0; border:0}

Answer 2

Похоже, что запрашиваемый padding не применяется. Вы пытались установить это явно на кнопку?

Answer 3

Я думаю, вы должны установить width для div