У меня есть следующий код HTML:
<style type="text/css">
.submitbutton{margin-left:-2px;padding:1px}
</style>
...
<form>
...
<input class=submitbutton type=submit value="Create Listings" />
</form>
В Firefox кнопка ввода имеет больше дополнений, чем в Chrome.
Любые идеи, почему?
ОБНОВЛЕНИЕ: Если вам интересно, почему у меня есть отрицательный запас - это потому, что между полем ввода и кнопкой ввода - слишком много места.
/* Remove button padding in FF */
button::-moz-focus-inner {
border:0;
padding:0;
}
Вы получите тот же самый вид кнопки в Chrome и Firefox.
Несмотря на то, что вы как тест разработчика в разных браузерах и видите разницу в кнопках, пользователь не будет. Слишком легко сосредоточиться на вещах, которые пользователи не заметят: у пользователя, вероятно, есть либо Firefox, либо IE, либо Chrome, но не все из них. Редко пользователи когда-либо переключают браузеры с течением времени, не говоря уже о переключении между ними и жалуются на разницу в несколько пикселей.
Итак, если вы рассматриваете кнопки и опыт только в одном браузере за раз, и если он хорошо работает в этом опыте/браузере, то не беспокойтесь тратить больше времени. Вместо этого перейдите к следующим шагам.
Это не отвечает "почему", но кто-то еще объяснил это.
элементы формы визуализируются по-разному (по умолчанию) в зависимости от ОС и/или браузера. если вы хотите, чтобы ваши элементы формы (поля ввода, кнопки отправки и т.д.) выглядели одинаково во всех экземплярах, вы должны явно их стилизовать, используя границы, paddings и поля.
То, что никто не упоминает здесь, заключается в том, что Chrome сбрасывает CSS для этих элементов:
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button
Итак, независимо от того, что вы установили для дополнения, насколько я могу судить, он будет отменен Chrome. Я пробовал использовать !important, а также другие методы и до сих пор не повезло. Если кто-то знает это, я бы с удовольствием узнал.
Попробуйте использовать -webkit-box-sizing:content-box, а затем прочитайте о коробке-моделях.
Попробуйте это
/* Browser Firefox to match the Chrome */
#buttonid::-moz-focus-inner, .buttonclass::-moz-focus-inner, button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
Я попытался теперь изменить высоту и дополнение в одно и то же время.
Результат неплохо. Кажется правильным для обоих браузеров (FF и Chrome в Linux)... например, я поставил:
.classname {
height:20px;
padding:4px;
}
Возможно, это только мой счастливый день... однако вы можете попробовать.
Чтобы получить одинаковый размер в обоих браузерах, вы должны установить одинаковые начальные значения для всех элементов CSS, например, reset.
Вот как я исправил проблему: поместите это в начало вашего файла css
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, a
{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width-value: 0px;
border-bottom-width: 0px;
border-left-width-value: 0px;
}
Теперь вам нужно исправить некоторые изменения аспект на вашей странице, но он будет выглядеть почти одинаково во всех браузерах.