Input placeholder line-height issue

Ответ 1

Для всех входов просто укажите

line-height:normal;

он будет иметь нормальную высоту линии и будет работать нормально во всех браузерах.

Ответ 2

Обычно я устанавливаю высоту и высоту строки для ввода [type = text] и наследует эти свойства до :: placeholder.

height: inherit;
line-height: inherit;

Ответ 3

Вы можете использовать waterwark js, чтобы исправить эту проблему.

http://jsfiddle.net/maxim75/yJuF3/

Посмотрите скрипт.

<input type="text" id="Text1" />

Ответ 4

Для тех, кто приходит к этому поздно, я нашел решение, которое работало в Twitter Bootstrap (3.1), а также несколько других тестов, которые я выполнял.

Просто добавьте элемент ввода:

height: inherit;
vertical-align: middle;

Ответ 5

Решение:

Применяется такая же длина строки 36px для ввода [type = "text" ].

Побочный эффект:

Перед тем, как дать высоту линии: 36px, он работал отлично во всех браузерах. Как я применил 36px line-height для ввода [type = "text" ], ниже показано, что произошло в Safari:

Второе решение:

Применить линейную высоту с помощью IE-хака. Это выглядит следующим образом

input[type="text"] {
    line-height: 36px\9; // CSS Hack only for IE.
}

Ответ 6

Попробуйте использовать это:

vertical-align:middle;

Ответ 7

Решение 1:
использовать входные данные без заполнителя:

<input type="text" class="generalInput" value="Topic" onBlur="javascript:if(this.value==''){this.value=this.defaultValue; strechInput(this.id , 'c');}" onFocus="javascript:if(this.value==this.defaultValue){this.value=''; strechInput(this.id , 's');}">

Решение 2:

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

var browsers = ['Firefox' , 'Safari'];//and so on
    var browser = 'unknown';
    for(var i = 0 ; i < browsers.length ; i++)
    {
        if(window.navigator.userAgent.indexOf(browsers[i]) != -1)
            browser = browsers[i];
    }
    var head = document.getElementsByTagName("head");
    var css = document.createElement("link");
    css.setAttribute('href' , './' + browser.toLowerCase() + '.css');
    css.setAttribute('rel' , 'stylesheet');
    (head[0]).appendChild(css);

Решение 3:
использование html комментариев

<!--[if IE]>
    <link rel="stylesheet" href="./ie.css">
<![ENDIF]-->