Блог

Главная - Вопросы по программированию - Загрузка разделов css-файла в зависимости от браузера

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

#css #cross-browser

#css — код #кросс-браузерный

Вопрос:

На моем веб-сайте есть кнопки, которые выглядят слишком узкими в 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. Что здесь не так?

Ответ №1:

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

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

Комментарии:

1. Я тоже подумал, что то, что я сделал, было странным, но я понял это из этой статьи: rafael.adm.br/css_browser_selector и его демо-версия работает.

2. неважно, я не читал, что для этого требуется код javascript вверху

Ответ №2:

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

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

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

Метки: