Как исправить глюк IE6/7, связанный с расползанием кнопки с длинным текстом
Читая один замечательный блог, я наткнулся на заметку о том, что в IE6/7 кнопки c "длинным текстом" становятся очень длинными.
Я не удержался и проверил: действительно. Причем только в IE6 и IE7, в IE8 (на удивление) всё в порядке.
Тестовая разметка (взята из исходной статьи):
<input value="В IE6-7 кнопку разносит как студента-интеллигента после рюмки абсента" type="submit" id="test"/>
</form>
Результат (IE7):
В IE6 аналогично.
Первым делом я стал грешить на стили по умолчанию (например, padding, заданный в процентах от ширины). Поэтому решил проверить очень простым скриптом:
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. Меняем разметку:
<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.
За табличку с дефолтными стилями респект.
А есть чисто под ie6 хак для этого?
Очевидно,
Спасибо за “чудесное” решение проблемы с кнопками, никогда бы не подумала, что проблема в overflow
Обращайтесь