輸入佔位符的line-height問題

enter image description here 輸入佔位符的line-height問題

問題是什麼？

有一個高度爲36px的輸入框，如上圖所示。在IE10佔位符不是垂直中間。

來源

2013-12-16 Tushar

你可以請張貼適用於輸入的CSS？沒有代碼的情況下查看可能會導致它的代碼很棘手。 – Advocation

如果您使用行高：嘗試在文本中添加「vertical-align：middle」 – RononDex

您不需要'行高'，共享您的完整代碼http://jsfiddle.net/VNrsQ/ –

對於所有的投入只是給

line-height:normal;

將採取正常的行高，並會在所有瀏覽器正常工作。

來源

2014-12-19 04:57:35

驚人的工作像魅力 –

那麼，爲什麼正常不是標準，偉大的回答壽！像魅力一樣工作。 –

-1

嘗試使用此：

vertical-align:middle;

來源

2013-12-16 12:47:03

我曾試過這個，但它沒有奏效。 – Tushar

@downvoters有什麼問題？ –

-1

解決方案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：

使用這個腳本添加爲每個瀏覽器分開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]-->

來源

2013-12-16 12:50:58 Soosh

感謝您的回覆，但是我對於佔位符的垂直對齊有問題，我想您已經爲佔位符分享了上述回覆。 – Tushar

@Tushar yea，還挺正確的，但我只是把這個給其他人的需要和更多的信息。 – Soosh

您可以使用waterwark JS來解決這個問題。

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

退房小提琴。

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

來源

2013-12-16 13:06:46 Anup

我有佔位符的垂直對齊問題，我想你已經有了佔位符以上的演示。 – Tushar

是的，僅在您的輸入標籤中添加佔位符屬性並不能保證在每個瀏覽器上完美對齊它。所以你可以去水印JS解決方案，如果你願意。 – Anup

對於任何人來到這個遲到 - 我發現，在Twitter的引導（3.1）工作的解決方案，以及其他一些測試，我跑了。

只需添加到輸入元素：

height: inherit; 
vertical-align: middle;

來源

2014-06-08 14:48:07 Julian

我通常設置的高度和行高到輸入[類型=文本]和繼承這些屬性來::佔位符。

height: inherit; 
line-height: inherit;

來源

2015-02-26 16:06:16 Garou

解決方案：

應用相同36px行高輸入[類型= 「文本」]。

副作用：

給人的line-height之前：36px它在所有的瀏覽器工作正常。正如我施加 36px行高輸入[類型= 「文本」]，下面是在Safari發生了什麼：

enter image description here

第二解決方案：

應用行高與IE劈。這是如下

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

來源

2016-11-28 13:32:55 Tushar

輸入佔位符的line-height問題

回答

相關問題