2016-04-05 1 views
0

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ş veGiriş yer tutucusu, firefox'ta dikey olarak hizalanmadı

Resim: aynı kod ile

enter image description here

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%; 
} 

cevap

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

+0

Ne yazık ki bu, bu konuda Safari'ye bulaşıyor. Chrome, her iki durumda da iyi işleyebilir. –

1

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.

0

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.

İlgili konular