Изображение в кнопке: странное пространство 2.0 (на этот раз IE7)

Question

Это продолжение моего предыдущего вопроса . Это касалось проблемы рендеринга в Firefox. После того, как эта проблема была исправлена, я, очевидно, проверил дизайн в других браузерах. И очевидно - как это могло быть иначе - я столкнулся с еще одной проблемой рендеринга, на этот раз в IE7.

Изображение при отображении кнопок в Internet Explorer 7 http://b.imagehost.org/0451/NastySpace2.png

Прежний из вышеперечисленных элементов представляет собой button, содержащий img. Последний является div, содержащим img.

В первом случае (с button и img) между границей img и границей button есть пробел. Я хочу избавиться от этого.

CSS:

* {
    margin: 0;
    padding: 0;
}

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

img {
    display: block;
}

/* this is a fix for one of the padding issues in IE7 */
button {
    overflow: visible;
}
/* this is a fix for the problem in Firefox linked above */
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Пожалуйста, помогите мне, я начинаю чувствовать себя очень зол, если честно. Это третья ошибка padding, с которой я сталкиваюсь с этим тегом button ...

Редактировать : Я даю щедрость на этот вопрос, чтобы получить более глубокое исправление для проблемы IE7 или для подсказок о других ошибках браузера, связанных с <button> s. Я хочу, чтобы кнопка выглядела идеально, пиксель за пикселем одинакова во всех основных браузерах. (PS: IE6 не крупный браузер.)

Answer 1

Что ж, похоже, я должен сделать вывод, что для этого нет исправления - по крайней мере, нет известного исправления. Таким образом, я не видел альтернативы, чем вручную удалять это пространство (используя отрицательные поля).

Вот мой полный список исправлений, из-за которых элемент button выглядит одинаково в Firefox, Safari, Chrome, Opera, Internet Explorer (IE9, IE8, IE7, не тестировал IE6):

button img {
    display: block; /* required to get rid of bottom space in many browsers */
    *margin: -1px -1px -3px -1px; /* remove additional space in IE7 */
}

button {
    overflow: visible; /* remove content-size dependent padding in IE7 */
}
button::-moz-focus-inner {
    border: 0;  /* remove inner focus from Firefox. The inner focus takes up */
    padding: 0; /* padding in Firefox even if not focused due to a bug */
}
button:focus {
    outline: 1px dotted black; /* as we removed the inner focus give it an outer focus ring to improve accessibility */
}

сжатая версия:

button img{display:block;*margin:-1px -1px -3px -1px}
button{overflow:visible}
button::-moz-focus-inner{border:0;padding:0}
button:focus{outline:1px dotted black}

Удалены разрывы строк:

button img{display:block;*margin:-1px -1px -3px -1px}button{overflow:visible}button::-moz-focus-inner{border:0;padding:0}button:focus{outline:1px dotted black}

Веселитесь вместе с последовательными button s!

Answer 2

Я обхожу эту проблему, используя <input type="image" /> вместо <button /> и используя javascript для изменения изображения, отображаемого при запуске событий mousedown и mouseup.

Попробуйте, это избавит вас от большой головной боли.

Answer 3

Я часто ругаюсь на кнопки, а затем решаю проблему, отображая изображение с помощью Javascript для отправки по клику.

Хакиш?Может быть.Но это приемлемое решение для 100+ крупных сайтов кредитных карт, которые я сделал для международного банка ... и на сегодняшний день я не нашел более требовательного клиента.

Answer 4

Вы пробовали добавить ширину: авто к кнопке?

button {    
    overflow: visible;
    width: auto;
}

Answer 5

Значит, display:block не может это исправить? Как насчет vertical-align:bottom для IMG? Можете ли вы установить тестовый пример на jsfiddle.net?

РЕДАКТИРОВАТЬ: display:block на кнопке, кажется, сделать это: http://work.arounds.org/sandbox/48/run

Редактировать # 2 : Упрямый, да .. это работает? http://work.arounds.org/sandbox/48