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

Vladimir
Опубликовано в: CSS, HTML, JavaScript

Как исправить глюк 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
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. Меняем разметку:

[-]
View Code HTML
<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.
Добавить в закладки

Связанные записи

16
Март
2008

Комментарии к статье «IE6/7: слишком широкие кнопки» (5)  »

  1. Максим Покровский says:

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

  2. гексли says:

    А есть чисто под ie6 хак для этого?

  3. Tetyana Uzun says:

    Спасибо за “чудесное” решение проблемы с кнопками, никогда бы не подумала, что проблема в overflow

Подписаться на RSS-ленту комментариев к статье «IE6/7: слишком широкие кнопки» Trackback URL: http://blog.sjinks.org.ua/javascript/36-too-wide-button-in-ie-6-7/trackback/

Оставить комментарий к записи «IE6/7: слишком широкие кнопки»

Вы можете использовать данные тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Оставляя комментарий, Вы выражаете своё согласие с Правилами комментирования.

Подписаться, не комментируя