zastępczy wejście line-height problem

Question

Jaki jest problem?

Istnieje pole wprowadzania o wysokości 36 pikseli, jak pokazano na powyższym obrazku. W IE10 symbol zastępczy nie jest środkowo w pionie.

Answer 1

Dla wszystkich wejść tylko dać

line-height:normal; 

zajmie normalne line-height i będzie działać poprawnie we wszystkich przeglądarkach.

Answer 2

spróbuje użyć tego:

vertical-align:middle; 

Answer 3

Rozwiązanie 1:
wejść używanie bez zastępczy:

<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');}">

Rozwiązanie 2:

wykorzystanie ten skrypt, aby dodać oddzielne css dla każdej przeglądarki

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); 

Rozwiązanie 3:
użycie html komentuje

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

Answer 4

Można użyć waterwark js, aby rozwiązać ten problem.

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

Wyjazd skrzypce.

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

Answer 5

Dla każdego, kto przyjeżdża do tego późno - Znalazłem rozwiązanie, które pracowały w Twitter Bootstrap (3.1), a także kilka innych testów wpadłem.

Wystarczy dodać do elementu wejściowego:

height: inherit; 
vertical-align: middle; 

Answer 6

zwykle ustawić wysokość i skład wysokość do wejścia [type = tekst] odziedziczyć tych właściwości :: zastępczy.

height: inherit; 
line-height: inherit; 

Answer 7

Rozwiązanie:

stosowana sama linia 36 px wysokości na wejście [type = "text"].

Efekt uboczny:

Przed podaniem line-height: 36 px to działa dobrze we wszystkich przeglądarce.Jak stosować 36 px line-height do wejścia [type = "text"], poniżej jest to, co wydarzyło się w Safari:

drugie rozwiązanie:

Zastosuj line-height z IE Hack . To jest następujące:

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