Загрузка разделов файла CSS в зависимости от браузера

Question

На моем веб-сайте есть кнопки, которые выглядят слишком худыми в Chrome по сравнению с Firefox.
HTML-код кнопки выглядит так:
<button name="shutdown" type="submit" value="df" class="boton"> Press </button>

Моя попытка CSS выглядит следующим образом:

.boton {
    font-size: 17px;
    color: #000;
    background: #ee3333;
    background: rgba(225, 50, 50, 0.6) !important;
    font-family: lucida console;
    border: 1px solid #FF4444;
    padding: 2px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    cursor:pointer;
}
.chrome .boton
{
    padding: 5px !important;
}

Я не уверен, правильно ли я это делаю.«.boton» действительно меняет стиль кнопки, но отступы в Chrome не меняются.Что здесь не так?

Answer 1

Если вы также не добавили какой-либо сниффер браузера, который добавляет класс .chrome и т. Д. В тело, этот класс не имеет никакого эффекта.

С другой стороны, блочная модель Firefox и Chrome принципиально не отличается, но значения по умолчанию для отступов, границ, полей и т. Д. Могут отличаться. Просто явно установите эти значения, и они, скорее всего, должны отображаться одинаково (дать или взять несколько пикселей из-за разных ошибок округления). Вам не нужно добавлять пользовательские CSS для каждого браузера (но если вы используете экспериментальные функции CSS, такие как -moz-border-radius и -webkit-border-radius с префиксами вендора, вы должны использовать все из них одновременно, остальные будут игнорировать неизвестные свойства) .

В разных версиях IE (Internet Explorer) есть радикально разные блочные модели, и если вы не можете заставить какую-то версию IE корректно отображать что-либо со стандартным CSS, вы должны использовать условно комментарии , чтобы включить специфичные для IE переопределения CSS после основного файла CSS.

Answer 2

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

Однако для достиженияДля более «горизонтального» заполнения вы можете использовать -webkit-padding-start (отступ слева) и -webkit-padding-end (отступ справа).В настоящее время я не верю, что для них есть полное заполнение или вертикальное заполнение.Обязательно используйте их, чтобы написать -webkit-padding-start, или любое другое правило, которое вы используете, после вашего правила padding.В противном случае последний перезапишет первый, и оба будут потеряны.