Дополнительное дополнение в <input type = "text" >

Кажется, что в каждом браузере добавляется некоторая магическая закодированная прокладка внутри <input type="text">. Некоторые браузеры (IE, Safari, Chrome) делают поле ввода немного выше, но они правильно выравниваются по верхнему краю, как если бы это был обычный элемент HTML. Я могу жить с лишним ростом. Но некоторые браузеры плохо себя ведут (Firefox и Opera), а также пытаются либо вертикально выровнять текст, либо добавить дополнительные надстройки над ним. Я удивлен, что современные браузеры не позволяют размещать текстовые поля, как если бы они были такими же, как HTML, и добавляли какое-то магическое форматирование. Я делаю что-то неправильно? Мне не хватает трюка? Являются ли они некоторыми проприетарными свойствами CSS, которые могут мне помочь? Я кратко рассмотрел документацию по CSS в Firefox, но я не смог найти ее. В качестве альтернативы я мог бы использовать редактируемый HTML вместо <input type="text">.

Вот фрагмент, который демонстрирует проблему:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <title>Test</title>

    <style type="text/css">

        body, input {
            font-family: sans-serif;
            font-size: 16pt;
            color: White; }

        #textbox {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 100px;
            background-color: #A5C9E2;
            line-height: 16pt;
            padding: 0px;
            margin: 0px;
            border-width: 0px; }

        #box {
            position: absolute;
            left: 120px;
            top: 20px;
            width: 100px;
            background-color: #AFD66A;
            line-height: 16pt; }

    </style>

</head>
<body>

    <input type="text" id="textbox" value="Hello">

    <div id="box">Hello</div>

</body>
</html>

Изменить: Я немного экспериментировал с - moz-outline и - moz-box-sizing в Firefox (на всякий случай), но ни одно из их значений не удаляет дополнительное дополнение.

Ответы

Ответ 1

Вы можете устранить это дополнительное заполнение, изменив размер окна ввода.

-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;

Это делает современные браузеры одинаковыми. Возможно, вам понадобится специально настроить IE.

Ответ 2

Я экспериментировал, изменив значения высоты линии и размера шрифта на 20 пикселей, а затем проверив элемент с помощью Firebug. Свойства clientHeight и offsetHeight равны 24px (но поскольку эти свойства включают любой набор дополнений для элемента, я не уверен, что это браузер, расширяющий высоту элемента или добавление отступов).

Явная установка высоты входа будет такой же, как высота строки, кажется, делает то, что вы хотите, т.е. line-height: 16pt; height: 16pt; - но я подозреваю, что она работает, обрезая элемент, так как вертикальное положение текста внутри вход не изменяется.