Giriş yer tutucusu, firefox'ta dikey olarak hizalanmadı

Question

Web sitemde, bir metin girişinin yer tutucusu metin girişinde, yalnızca firefox'ta yüksek olarak konumlandırılmıştır. Diğer tüm tarayıcılarda dikey olarak ortalanır. ateş ve

Resim: aynı kod ile

In this jsfiddle that I made, dikey ateş ortalanır.

Web sitemde, jsfiddle'ın en üstünde olmadığı zaman, firefox'ta girişin en üstünde olmasına neden olabilir?

kodu:

html:

<div id="search-button"> 
      <input id="search-input" placeholder="SEARCH KEY WORD"></input> 
      <div id="search-icon"></div> 
     </div> 

css:

#search-button, 
#search-icon { 
    font: 200 14px 'Helvetica Neue' , Helvetica , Arial , sans-serif; 
    border-radius: 6px; 
    height: 64px; 
    text-decoration: none; 
    color: #fff; 
    float: right; 
    margin-bottom: 20px; 
    line-height: 64px; 
} 
#search-button { 
    position: relative; 
    width: 100%; 
    border: 1px solid #00bfff; 
} 
input, 
textarea, 
button { 
    outline: none; 
} 
#search-input { 
    position: absolute; 
    height: 100%; 
    left: 20px; 
    right: 20px; 
    font-size: 14px; 
    text-transform: uppercase; 
    line-height: 100%; 
    width: calc(100% - 80px); 
    display: inline-block; 
    border: 0; 
    color: #00bfff; 
} 
#search-icon { 
    width: 64px; 
    height: 64px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    background: url("../../assets/images/home_page/search-blue.svg") center no-repeat; 
    background-size: 40%; 
} 

Answer 1

Seti line-height ve height eşit olduğu metin ve tutucu bu

css gibi dikey merkezli gelmeyecek yüzden

#search-input { 
    line-height:40px; 
    height:40px; 
} 

Satır yüksekliği hem eşit metin dikey merkez

Answer 2

Sana söz tam etkiyi çoğaltmak açamadı gösterecektir ise çok iyi bildiğimiz metin ve iç yüksekliği değerine yüksekliğini verecektir . Dediğin gibi, kemanda görünmüyor. Öğedeki metin aralığını işlemek için line-height kullandığınızı fark ettim. Bu, yerel tarayıcı yazı tipi ayarları tarafından gerçekleştirilebilir (bazı özel tarayıcı yazı tipi ayarlarınız veya devam eden bir şeyleriniz olabilir). Tarayıcının font-height etkilerinden etkilenmeyecek olan arama kutusundaki metnin boşluklarını padding özelliğini kullanarak ayarlamayı deneyebilirsiniz.

Answer 3

Yer tutucuyu renklendirmek için belirli tarayıcıları hedefliyordum, bu yüzden firefox'a bir satır yüksekliği özelliği ekledim.

::-webkit-input-placeholder { 
    color: brand-blue; 
} 

:-moz-placeholder { /* Firefox 18- */ 
    color: brand-blue; 
    line-height 60px; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: brand-blue; 
    line-height 60px; 
} 

:-ms-input-placeholder { 
    color: brand-blue; 
} 

Gerçekten iyi uygulama cevap, ama benim senaryo sadece daha iyi bir yanıt nedense çalışmasına izin vermedi.