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 XHTML
<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
background rgb(212, 208, 200) rgb(212, 208, 200) rgb(212, 208, 200) rgb(212, 208, 200) transparent (???) rgb(192, 192, 192)
border 2px outset rgb(212, 208, 200) 2px outset rgb(0, 0, 0) 2px outset rgb(0, 0, 0) 3px outset rgb(0, 0, 0) 2 both transparent (???) 0 none rgb(0, 0, 0)
display inline inline inline inline-block inline inline-block
font normal normal 400 13.3333px/normal "MS Shell Dlg" normal normal 400 10pt/normal "MS Shell Dlg" normal normal 400 1