Как исправить отображение элемента в Mozzila?

Question

[spone379]

Здравствуйте, сверстал кнопку и всё бы хорошо, но решил проверить на разных браузерах.
В итоге так сложилось, что некорректно она отображается только в Mozilla.(проверял в IE, Opera, Google). В итоге я решил эту проблему, теперь она отображается и там хорошо. Но я только учусь и мне непонятно, из-за чего так и какие способы устранения тут можно использовать. Так что прикрепил код, который некорректно отображает кнопку в Mozilla
codepen.io/anon/pen/ONPMNm

Comments

[zooks]

Запомните: не Mozilla, а Firefox.

Answer 1

[Денис Инешин]

Дело в том что в ФФ у кнопок есть некий внутренний отсуп.
Чтобы всегда все было одинаково, используйте Normalize.css. Вот кусочек из него, который это чинит:

/**
 * Remove inner padding and border in Firefox 4+.
 */

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

Вот посмотрите, я всего лишь в настройках CSS включил галочку normalize: codepen.io/anon/pen/QNwyOx

Comments

[spone379]

Спасибо! А я использовал "Reset CSS Eric Meyer's", думал там есть всё)

[Денис Инешин]

spone379: вот как раз reset и не нужно использовать. Зачем обнулять, когда можно сделать одинаково? И получить какие-то нормальные дефолтные значения из коробки?

[spone379]

Я считал, что обнуление как раз и делает одинаково. Вы разве не обнуляете отступы у элементов? Я сейчас в normalize добавляю обнуление из resset всех отступов.

[Денис Инешин]

spone379: Конечно не обнуляю. Это плохое проектирование - менять дефолтное поведение элементов. Вы должны трогать только непосредственно те элементы, которые стилизуете. Поверьте мне, это сильно облегчает работу и кроссбраузерную настройку.

[spone379]

Денис Инешин: спасибо, возьму на заметку себе!

Answer 2

[Андрей Федоров]

псевдо-элементы по умолчанию inline. поэтому у вас стандартаная проблема межсимвольного интервала. добавьте для :before

display: block;
  width: 100%;
  box-sizing: border-box;

и проблемы не будет

codepen.io/aliencash/pen/ZWYQvP