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çinaşağıdaki değerlere sahip 35px
Not: Her tarayıcıda yerleşik geliştirici aracından
değerlerini aldım. 10height
ö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ı?
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, –
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 –
1/normalizers –