HTML：跨瀏覽器

不同的輸入框中的默認/計算的內容高度比方說，我有以下代碼HTML：跨瀏覽器

.username { 
 
    font-size: 30px; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
    border: 2px solid #E0E0E0; 
 
}

<input class="username" type="text" />

查看現場演示http://jsbin.com/qudorugoguya/1/edit?html,css,output

據我所知，總height = content height + padding-top + padding-bottom +（border-width x 2）。

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

然而，當height屬性沒有賦值，好像計算的內容高度從瀏覽器更改爲瀏覽器。就好像它是字體大小+與字體大小成比例的一些任意數量的像素的結果。

對於不同的瀏覽器content height具有下列值：

鉻38：34像素
火狐33：35px
IE 11：34.5px
IE 8：35px

注意：我從每個瀏覽器的內置開發者工具中獲得的值

有沒有什麼辦法從瀏覽器到瀏覽器獲得一致的值而不設置height屬性或line-height屬性？

來源

2014-10-17 Adrien Be

請注意，CSS Reset＆Normalizer與此問題無關。事實上，即使您在本示例中添加了CSS重置，其行爲也不同，請參閱http://jsbin.com/vecugikuyivo/1/edit – 2014-10-17 14:25:59

CSS重置/規範化樣式表_supposed_以提供跨瀏覽器一致性佈局，字體，大小等方面的條款。但是，到目前爲止，我已經嘗試了6種不同的方法，雖然它們都能在各種事情上取得成功，但它們都不適用於這個特殊問題。所以，很好的問題！我爲它+1了，因爲我希望看到一個回答引用了一個特定的樣式表，它實際上在所有瀏覽器中正常化了輸入的高度... – 2014-10-17 14:52:15

用於測試6種不同復位/歸一化器的+1 – 2014-10-17 15:02:39

不，除了你提到的方法之外沒有辦法做到這一點。即使CSS重置/規範化器也會在幕後使用這些方法。

如果跨瀏覽器的內容高度對你非常重要，我建議使用圖片。

來源

2014-10-20 14:47:55

HTML：跨瀏覽器

回答

相關問題