Ars Longa, Vita Brevis

Март 16, 2008

IE6/7: слишком широкие кнопки

Рубрика: CSS, HTML, JavaScript
Метки: , , , , , , , , , , ,
Vladimir @ 10:57 дп
RSS 2.0

Как исправить глюк IE6/7, связанный с расползанием кнопки с длинным текстом

Читая один замечательный блог, я наткнулся на заметку о том, что в IE6/7 кнопки c "длинным текстом" становятся очень длинными.

Я не удержался и проверил: действительно. Причем только в IE6 и IE7, в IE8 (на удивление) всё в порядке.

Тестовая разметка (взята из исходной статьи):

[-]
View Code HTML
<form action="#" method="get">
    <input value="В IE6-7 кнопку разносит как студента-интеллигента после рюмки абсента" type="submit" id="test"/>
</form>

Результат (IE7):

В IE6 аналогично.

Первым делом я стал грешить на стили по умолчанию (например, padding, заданный в процентах от ширины). Поэтому решил проверить очень простым скриптом:

[-]
View Code Javascript
var b = document.getElementById('test');
var s = (b.currentStyle) ? b.currentStyle : b.ownerDocument.defaultView.getComputedStyle(b, '');
for (var prop in s) {
    document.write('<b>' + prop + '</b>: ' + s[prop] + '<br/>');
}

Увы… Зато, кому интересно, получились такие дефолтные стили в разных браузерах:

  FF2 IE6 IE7 IE8 Opera 9 Safari 3