2014-10-17 17 views
5

genelinde farklı giriş kutusu varsayılan/hesaplanan içerik yüksekliği en ı toplam anlıyoruz http://jsbin.com/qudorugoguya/1/edit?html,css,outputHTML: tarayıcılar

.username { 
 
    font-size: 30px; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
    border: 2px solid #E0E0E0; 
 
}
<input class="username" type="text" />

canlı demo bakın Aşağıdaki kodu var diyelim edilir yükseklik = içerik yüksekliği + dolgu üst + alt dolgu + (kenar genişliği x 2). height özelliğe bir değer atandığında değilken hesaplanan içerik yüksekliği tarayıcıdan tarayıcıya değişir gibi

http://www.w3.org/TR/CSS21/box.html#box-dimensions

Ancak, öyle görünüyor. Yazı tipi boyutu + yazı tipi boyutuyla orantılı olan bazı rasgele sayıların sonucuymış gibi.

  • Krom 38: 34 piksel
  • Firefox 33: 35px
  • IE 11: 34.5px
  • IE 8: farklı tarayıcılarda content height için

    aşağıdaki değerlere sahip 35px

Not: Her tarayıcıda yerleşik geliştirici aracından

değerlerini aldım. 10

height özelliği line-height özelliği ayarlanmadan tarayıcıdan tarayıcıya tarayıcıya tutarlı değerler almanın bir yolu var mı?

+0

CSS Sıfırlama ve Normalizörün bu soruyla ilgisi olmadığını unutmayın. Gerçekten de, bu örnekte CSS Sıfırlama ekleseniz bile, davranış farklıdır, –

+2

CSS sıfırlama/normalleştirme stil _supposed_ çapraz tarayıcı tutarlılık sağlamak için vardır http://jsbin.com/vecugikuyivo/1/edit üzerinde kendiniz bakın paftalar, fontlar, boyutlandırma vb. terimleri. Ancak, bugüne kadar 6 farklı şeyi denedim ve hepsi çeşitli şeylerde başarılı olurken, hiçbiri bu özel problem için işe yaramıyor. Yani, harika soru! Ben bir cevap aslında tüm tarayıcılar arasında girişin yüksekliği ... 6 farklı sıfırlama test etmek için –

+0

1/normalizers –

cevap

0

Hayır, Bahsettiğiniz yöntemlerle yanında bunu yapmanın bir yolu yoktur. CSS sıfırlamaları/normalleştiriciler bile bu yöntemleri sahne arkasında kullanır. Çapraz tarayıcı içerik yükseklikleri sizin için çok önemli ise

, ben görüntüleri kullanmanızı öneririz.

İlgili konular