В Chrome + Safari для ввода и выбора элементов добавлены отступы, но не в Firefox?

Question

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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