Дополнительный отступ в <input type = "text"> - PullRequest
Новая
       35

Дополнительный отступ в <input type = "text">

15 голосов
/ 04 декабря 2009

Кажется, что каждый браузер добавляет магический жестко заданный отступ внутри <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 (на всякий случай), но ни один из их значения убирают лишние отступы.

Ответы [ 2 ]

9 голосов
/ 03 августа 2010

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

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

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

3 голосов
/ 04 декабря 2009

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

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

...