Почему иногда искажается отображение текста на странице сайта при ее обновлении?

Question

[Павел Никитин]

Здравствуйте!

Не однократно сталкиваюсь с необъяснимой для себя проблемой, не могу найти ее решения..
Сверстал полноценный сайт, но многие элементы, иногда, ведут себя не корректно после обновления страницы.

Пример, имеется пару кнопок, текст в которых ведет себя по разному, иногда корректно, иногда опускается вниз:

Корректное представление


Ошибочное..
Помогите понять почему это происходит, с 50% вероятностью ошибка имеет место..

Стили кнопки:

.filters_menu__btn {
    text-align: center;
    min-width: 36px;
    line-height: 38px;
    height: 40px;
    background: #fff;
    border: 1px solid #ccc;
    margin: 0 -1px 0 0;
    cursor: pointer;
    display: block;
}

При этом, если открыть исходный код страницы в браузере и внести любое изменение в стили, любому элементу, то в мгновение все проблемные места выравниваются..

Answer 1

[Павел Никитин]

Выявил проблему, всему виной reset.css, каким то образом он влияет на верстку.. Отключил, все работает корректно..

Answer 2

[Евгений Конкин]

Как мне кажется, много лишнего в стиле. Как бы я сделал такую кнопку:
.filters_menu__btn {
padding: 20px;
background: #fff;
border: 1px solid #ccc;
cursor: pointer;
}

Sorry за код, пишу с мобилы!

Comments

[Павел Никитин]

Не задавая высоту возникает проблема с Mozilla в 1px

[Павел Никитин]

Этаже кнопка может корректно отражаться без проявления данной проблемы на других страницах, модулях..

[Евгений Конкин]

kopbox: попробуйте добавить line-height равной размеру шрифта
Например:
font-size: 12px;
line-height: 12px;