Ars Longa, Vita Brevis

Март 16, 2008

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

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

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

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

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

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

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

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

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

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

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 10pt/normal “MS Shell Dlg” normal normal 400 10pt/normal Arial normal normal normal relative/normal Arial normal normal normal 11px/normal “Lucida Grande”
height 18px auto auto auto auto 18px
margin 0 auto auto auto 0 2px
overflow visible hidden hidden hidden visible visible
padding 0 6px 0 0 1px 8px 1px 8px 0 8px

Видим, что у всех браузеров, кроме IE, overflow установлено в visible. Хотя overflow не должно играть здесь никакой роли, интересно проверить, как IE себя поведёт при дефолтных стилях FireFox. Меняем разметку:

<form action="#" method="get">
    <input value="В IE6-7 кнопку разносит как студента-интеллигента после рюмки абсента" type="submit" id="test" style="overflow: visible;"/>
</form>

Сработало! Вот они, чудеса:

Я не берусь объяснять, почему такое вот исправление сработало. Как говорил классик,

Why is this happening? Don’t ask such silly questions! This is IE, remember? Conformance with the specs is only to be hoped for, not expected. The simple fact is it does happen.

1 комментарий »

  1. За табличку с дефолтными стилями респект.

    Комментарий от Максим Покровский — Март 16, 2008 @ 3:23 пп

RSS комментариев к этой записи. URL обратной ссылки

Оставить комментарий