Как я могу удалить лишние и разные псевдо-отступы при вводе текста в Webkit и Gecko?

Question

Проблема возникает только на input[type="text"] в Webkit. Независимо от того, что я делаю, в элементе есть эквивалент padding: 1px 0 0 1px (только сверху и слева).

Аналогичная проблема возникает в Gecko, input[type="text"] имеет эквивалентное дополнительное padding: 1px 0 0 1px, а input[type="button"] имеет дополнительное padding: 1px 0 0 0.

Вот JSFiddle, показывающий все, что я пробовал, и ничего не работает: http://jsfiddle.net/PncMR/10/

Интересно, что когда вы устанавливаете высоту строки всех элементов на 0 (http://jsfiddle.net/PncMR/11/), единственными незатронутыми элементами являются те, которые имеют проблемы, поэтому я предполагаю, что браузер по умолчанию до определенной высоты строки, и сейчас я ищу способ переопределить ее.

---

В базовых стилях webkit я не нашел ничего такого, что могло бы сделать это, но не стесняйтесь проверять себя:

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Это не проблема moz-focus-inner, не проблема appearance: none, не проблема box-sizing, не проблема outline, и я не могу найти другие решения.

---

Редактировать: см. Мой ответ ниже о проблемах с вертикальным заполнением, но Я все еще ищу решение дополнительного padding-left: 1px эквивалента для ввода текста только в webkit и gecko. (http://jsfiddle.net/PncMR/14/)

Answer 1

В Webkit

Дополнительное вертикальное «заполнение» для input[type="text"] в Webkit связано с тем, что вы не можете дать текстовым вводам значение line-height меньше normal, которое не является конкретным значением , но варьируется в зависимости от гарнитура .

Я знаю, что это причина, но я не могу найти, где ввод получит этот стиль, потому что он не отображается в таблицах стилей Webkit UA.

В гекконе

Дополнительное вертикальное заполнение для input[type="text"] и input[type="button"] в Gecko связано с таблицей стилей агента пользователя, содержащей:

input {
    line-height: normal !important;
}

Объявления

и !important в таблице стилей агента пользователя не могут быть переопределены каким-либо образом .

Заключение

Вы не можете перейти под line-height: normal в Webkit, и у вас не может быть ничего, кроме line-height: normal, для этих элементов в Gecko, поэтому лучшее решение - всегда стилизовать эти элементы с помощью line-height: normal, чтобы получить лучшая согласованность, что не очень хорошее решение. В идеале мы могли бы переопределить все стили UA.

---

Ни один из них не учитывает дополнительные 1px того, что действует как text-indent, которое появляется только на input[type="text"] в обоих движках рендеринга.

---

Люди, которые заботятся об этом, должны высказать свое мнение по этим двум темам Bugzilla:

• https://bugzilla.mozilla.org/show_bug.cgi?id=697451
• https://bugzilla.mozilla.org/show_bug.cgi?id=349259

Answer 2

Причина, по которой это происходит, заключается в том, что браузер обрабатывает содержимое <input>, как если бы оно было встроенным элементом, независимо от значения display в <input>. Встроенные элементы имеют минимальную высоту, как показано здесь: http://jsfiddle.net/ThinkingStiff/zhReb/

Вы можете переопределить это поведение, установив дочерний элемент inline-block. Вы можете сделать это с помощью first-line псевдоэлемента.

input:first-line {
    display: inline-block;    
}

Я более подробно расскажу, почему это в моем ответе на другой вопрос: https://stackoverflow.com/a/8964378/918414

Это не работает в Firefox, но по другой причине: таблица стилей UA Firefox (как обрисовано в общих чертах в ответе @ Ian).