Отступы в кнопках браузеров

Избавляемся от отступов в стандартных кнопках неправильных браузеров с помощью 1 правила CSS.

Небольшое предисловие.

Так случилось, что я подписался на сайте 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) справа и слева непонятные отступы, причем, чем длиннее была надпись на кнопке, тем больше отступы. Вот как-то так:

лишние отступы в кнопках в браузерах Интернет Експлорер 5-7

Как видите, присутствуют лишние отступы в кнопках в браузерах Интернет Експлорер 5-7.

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

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

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

И что же делать? Как привести в чувство этот загадочный ИЕ? Ответ как всегда прост и непостижим, как и любое шаманство, касающееся ИЕ.

Решение.

Задайте в ваших стилях для кнопок простое свойство overflow: visible. Вуаля, и теперь уже для ИЕ придется добавить несколько пикселей справа и слева, чтобы по бокам были отступы.

Итак, чтобы убрать лишние отступы в кнопках в браузерах семейства Интернет Екслорер версий 6 и 7 надо добавить в стили для этих кнопок свойство overflow: visible и поправить отступы, которые теперь нам полностью подвластны.сайт источник http://yapro.ru Fri Feb 12 2010 16:10:13 GMT+0300

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

Посмотреть пример в отдельном окне »

Источник: starhack.ru

Оцени публикацию:
  • 3,11
Оценили человек: 3

Похожие статьи:

Справочники и учебники:


Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2017 YaPro.Ru

Главная » Веб-мастеру » CSS »