#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.