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

Проблема возникает только в 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, которые бы это сделали, но не стесняйтесь проверить себя:

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

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

Ответы

Ответ 1

В Webkit

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

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

В Gecko

Дополнительное вертикальное "заполнение" в 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:

Ответ 2

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

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

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

Я расскажу подробнее о том, почему это в моем ответе на другой вопрос: fooobar.com/info/226412/...

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