Элементы input и select имеют отступы, добавленные в Chrome + Safari, но не в Firefox?

Я заметил, что стандартные поля ввода и элементы выбора добавляют 1 или 2 пикселя вокруг него в Chrome + Safari, но не в Firefox.

Вы можете увидеть простой пример здесь: http://pastehtml.com/view/aussjg3en.html

Firefox 4.0.1: не добавляет отступы к элементам.

Chrome 11.0.696.68: добавляется отступ 2 пикселя сверху и слева в полях ввода, но только 2 пикселя сверху для элементов выбора.

Safari 5.0.3: добавлены отступы в 2 пикселя сверху и слева для полей ввода, но только 2 пикселя сверху для элементов выбора.

Но почему? И могу ли я исправить это с помощью простого CSS, а не создавать специальные таблицы стилей для этих браузеров? Я просто хочу, чтобы это выглядело как в Firefox без автоматического заполнения.


google-chrome input padding safari cross-browser
person donpedroper    schedule 24.05.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Этот вопрос уже обсуждался ранее (например, здесь , просто найдите «дополнительное дополнение»), но механизм рендеринга Webkit добавляет дополнение (Chrome и Safari используют его).

Вы можете решить это с помощью CSS. Механизмы рендеринга просто имеют разные значения «по умолчанию». Что вам нужно сделать, так это явно указать элементам, чтобы они имели отступы и поля, равные 0, или все, что вы хотите.

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

person Joe    schedule 24.05.2011
comment
Спасибо за ответ .. Очевидно, я искал неправильные вещи, пытаясь найти решение :) - person donpedroper; 25.05.2011
comment
Это не отвечает на вопрос, даже после добавления таблицы стилей сброса ввод и выбор имеют разные отступы. вы можете добавить padding:0, box-sizing:border-box; внешний вид: нет, и проблема все еще существует, к выбору добавлено отступ 2px слева. - person spreadzz; 25.08.2015

arrow_upward
2
arrow_downward

Удалите <input type="search">, чтобы исправить проблему заполнения в Chrome.

person The Master    schedule 10.09.2012
comment
Это здорово, это также решает ту же проблему в Safari. - person Huangism; 02.10.2015