Как убрать лишние отступы для кнопок в Mozilla Firefox

Иногда  при верстке кнопок можно столкнуться с проблемой в браузере Firefox, если нам надо полностью убрать отступы в кнопке. Для остальных (новых) браузеров достаточно написать следующий CSS:

[codesyntax lang=»css» title=»CSS»]

.button{
	padding:0;
	border:0;
}

[/codesyntax]

Но Firefox упрямо оставляет между текстом и границей кнопки по 3px. Это касается как тега button, так и input (с атрибутом type=«button | reset | submit«). Чтобы этого избежать можно добавить специальный хак от Mozilla:

[codesyntax lang=»css» title=»CSS»]

.button::-moz-focus-inner {
        padding:0;
        border:0;
}

[/codesyntax]

Это скроет лишний отступ, но также приведет к потере кнопкой ее выделения при фокусе. Чтобы это исправить нужно для .button:focus указать наличие outline, расположенного снаружи вокруг кнопки. Общий CSS будет выглядеть так:

 

[codesyntax lang=»css» bookmarkname=»CSS»]

.button {
	padding:0;
	border:0
}
.button::-moz-focus-inner {
	border:0;
	padding:0;
}
.button:focus {
	outline: 1px dotted;
}

[/codesyntax]

 

Запись опубликована в рубрике HTML/CSS с метками , , . Добавьте в закладки постоянную ссылку.

5 комментариев: Как убрать лишние отступы для кнопок в Mozilla Firefox

  1. Витя says:

    Для firefox достаточно написать border:0
    http://divhack.com/node/48

  2. Анастасия says:

    Спасибо огромное,очень помогло!

  3. al-x says:

    Спасибо! Помогло отчасти! Однако, фокус в мозиле так и не появился…

  4. Zemez says:

    В некоторых случаях может помочь line-height: 1;, если скажем размер шрифта такой же или почти такой же как высота кнопки.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *