CSS Guru

Неболь�?ое предисловие. Так случилось, что я подписался на сайте WSG на мейл-лист для обсуждения различных вопросов, связанных с применением веб-стандартов в ежедневной практике. Да, в этой подписке случаются интересные обсуждения, но зачастую там появляются вопросы настолько простые, что даже становится как-то неловко за авторитет уважаемой WSG. Вот и в этот раз вопрос был просто потрясающим: можно ли использовать картинку-бекграунд для кнопки с нефиксированной �?ириной. Но не это меня побудило меня черкануть пару строк. В одном из ответов, как луч�?е все сделать проскользнул совет:

Something like this (как-то так):
button {padding:2px 5px;background: #FAF9F5 url(../images/bgimg.png) repeat;line-height: 1.5;
}
then use smaller padding left/right value for IE, e.g. (и потом умень�?ите отступы для �?Е)
button {padding: 2px 1px !important}

Вот последняя строчка и вызвала мое изумление. Уважаемый подписчик WSG не знает как можно избавиться от ли�?них отступов по бокам в кнопках в �?нтернет Експлорере.

Поясню в чем дело. �?нтернет Експлорер в версиях до 7 включительно добавлял в кнопках (будь то input, илиbutton) справа и слева непонятные отступы, причем, чем длиннее была надпись на кнопке, тем боль�?е отступы. Вот как-то так:

Тогда как в остальных браузерах (для меня это Файрфокс, Опера и Хром) все выглядит так:

отступы в кнопках в файрфоксе

Никаких непонятных отступов, все одинаково, независимо от количества знаков в надписи.

�? что же делать? Как привести в чувство этот загадочный �?Е? Ответ как всегда прост и непостижим, как и любое �?аманство, касающееся �?Е. Задайте в ва�?их стилях для кнопок простое свойство overflow: visible. Вуаля, и теперь уже для �?Е придется добавить несколько пикселей справа и слева, чтобы по бокам были отступы

�?так, чтобы убрать ли�?ние отступы в кнопках в браузерах семейства �?нтернет Екслорер версий 6 и 7 надо добавить в стили для этих кнопок свойство overflow: visible и поправить отступы, которые теперь нам полностью подвластны.

На живом примере разницу увидят только обладатели �?Е6-�?Е7 (на �?Е5 не проверял ибо нех (написал это и проверил-таки — �?Е 5.01 — сакс, �?Е 5.5 подобен �?Е6 — но все равно нех уже))
button

button — ли�?ние отступы чудесным образом пропали

submit type submit

submit type submit

Метки: �?Е6, �?Е7, верстка, азы css, азы верстки

Запись создана: Четверг, 18 Июнь 2009 в 22:22 и находится в рубриках CSS, верстка. Вы можете следить за комментариями к этой записи через ленту RSS 2.0. Вы можете оставить отзыв, или trackback с вашего собственного сайта.