HTML5，佔位符，線高度的Webkit

我有一個輸入字段：HTML5，佔位符，線高度的Webkit

<input type="text" placeholder="whatever">

與樣式：

input { 
    margin: 0; 
    padding: 0 6px; 
    font-size: 19px; 
    line-height: 19px; 
    height: 36px; 
    width: 255px; 
}

問題是線高度不發生作用爲在webkit的佔位符鉻。所以輸入字段中的文本以一種難看的方式對齊。任何人都看到了這個，現在如何解決它？

感謝

來源

2011-02-13 AnApprentice

這是什麼都與佔位呢？ – xzyfer

輸入中的佔位符文本未與行高CSS規則對齊。 – AnApprentice

看起來像是一個Chrome的bug：http://stackoverflow.com/questions/4919680/html5-placeholder-css-padding-problem – Emily

看你的標籤，我假設你正在編寫類似...

<input type="text" placeholder="whatever">

不幸的是，Chrome瀏覽器捆綁你的手，當談到造型佔位符，選擇看起來像這樣...

input::-webkit-input-placeholder {}

您可以找到樣式選項，陷阱和支持的瀏覽器在Styling the HTML Placeholder

來源

2011-02-13 05:24:28 Duopixel

感謝您的幫助。然而它的獨特性。佔位符應該隱式地繼承這些樣式。 –

我不認爲我能完全複製你的問題，但也許你可以使用padding: 7px 6px;修復它。這樣做應該有希望將頂部和底部填充設置爲7像素，這幾乎與line-height類似。使用不同的大小（寬度/字體大小），您應該可以通過計算(height - fontsize)/2來選擇合適的填充，可能會給出或獲得一個或兩個像素以達到完美。

來源

2011-02-13 02:46:22 nxasdf

看來，完全消除您的line-height聲明WOR KS。它在FF7，Chrome15和Safari 5.1中適用於我。在IE9和FF3.6中也看起來不錯，但在IE8中看起來不太好。

來源

2011-11-14 16:03:20

這對我有效。但在某些情況下，您可能不想刪除輸入的「行高」，因此它可能不適用於所有人。 –

非常好。行高：正常;是我以前從未訴諸的東西，但它在這裏是有道理的。我會說佔位符和他們的波動選擇標準是一些不完善的代碼的一個很好的藉口，它通過刪除而不是添加來修復它:) – jerclarke

輸入元素只在一行上運行 - 行高不適用。 –

輸入佔位符似乎不喜歡像素的line-height值，但這將垂直居中輸入：

::-webkit-input-placeholder { line-height: normal; }

來源

2013-07-16 15:59:00

請添加一些澄清/說明 – tnw

HTML5，佔位符，線高度的Webkit

回答

相關問題