占位符文本未在 Safari 中垂直居中

Question

你知道如何在 safari 中讓占位符屬性垂直居中嗎？ 盡管當您開始打字時，文本完全居中。

Answer 1

-Safari 解決方案-

盡管使用，我還是被這個問題困住了很長時間

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

事實證明，在直接input元素中設置行高會破壞我的input::webkit-input-placeholder行高。

解決方案擴展：

我刪除了輸入樣式中的行高，它解決了我的問題。

Answer 2

最簡單的方法是同時使用line-height和height CSS 屬性。 只需給文本輸入一個line-height ，其值與其height相同。

順便說一句，您的實時網站在 chrome 16 中看起來不錯。

Answer 3

對我來說，最好的解決方案是對 IE 8 使用 line-height:normal 和 hack。

<input type="text" name="test_name" placeholder="Search">


input {
    height: 35px;
    line-height: normal;
    line-height: 32px\0/; /* for IE 8 */
}

Answer 4

也有這個bug。 在 em 中設置 line-height 為我解決了這個問題。 它在 Chrome、Safari（桌面和 iOS）和 Firefox 中看起來相同。 我添加了一個 \\9 技巧來在 IE 中獲得垂直居中。 這是我的 css

height: 36px;       
line-height: 1.2em;
line-height: 26px\9; /*for IE */

Answer 5

對我來說很好用：

<input type="text" name="first_name" placeholder="Search" style="height: 50px;">

嘗試改變這個：

#register-block-fields input {
width: 230px;
height: 41px;
padding-left: 40px;
padding-right: 20px;
height: 41px; // Changed from line-height
color: #878787;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
background: none;
}

Answer 6

對我來說，這很有效：

line-height: inherit;

Answer 7

其他答案都不適合我，可能是因為我的輸入元素在彈性框內。

我最終需要以 px 為單位指定行高 - 與輸入元素的默認值相比，行高的值較大。

input[type="text"] { line-height: 32px; }

感覺像一個黑客，但這是我唯一可以開始工作的東西。