爲什麼firefox顯示框與Safari，IE，Chrome等不同？

我一直在解決這個小問題，但非常煩人的跨瀏覽器CSS問題：由於某些原因，Firefox顯示來自其他瀏覽器的不同測量值的框/輸入字段。看起來Firefox似乎忽略了框尺寸：邊框，並仍然通過自己的措施來衡量框。這裏的原因是什麼？有沒有任何泡泡糖解決方案？我準備好了。爲什麼firefox顯示框與Safari，IE，Chrome等不同？

我在這裏做的是動態jQuery輸入域加法器。旁邊的加號按鈕的字段是 'fakefields' 由於某種原因在Firefox中顯示不同：

enter image description here

文檔類型：XHTML 1.0 Strict標準

CSS：

.fakeinpfield { 
     border: 1px solid #C2C2C2 !important; 
     -moz-border-radius: 2px; 
     -webkit-border-radius: 2px; 
     border-radius: 2px; 
} 
input#fakeinpfield3 { 
     width: 320px !important; 
     margin-right: 6px; 
     margin-top: 3px; 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
     height: 26px; 
     padding: 0; 

} 
input#fakeinpfield4 { 
     width: 135px !important; 
     margin-right: 6px; 
     margin-top: 3px; 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
     height: 26px; 
     padding: 0; 
} 
input#fakeinpfield5 { 
     width: 135px !important; 
     margin-right: 6px; 
     margin-top: 3px; 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
     height: 26px; 
     padding: 0; 
}

來源

2013-01-04 art2

你爲什麼要刪除你的評論？ – art2

好吧我用箱子尺寸來解決它。似乎我需要爲Firefox使用不同的盒子大小，因爲它測量盒子的方式不同（我也將該元素設置爲內聯塊，但我不確定最終是否與此有關）更多閱讀：http://www.quirksmode.org/css/box.html

input#fakeinpfield3 { 
     width: 318px !important; 
     margin: 3px 6px 0 0; 
     -moz-box-sizing: border-box; 
     box-sizing: content-box; 
     height: 26px; 
     padding: 0; 
     display: inline-block; 
}

來源

2013-01-04 12:03:26 art2

我不是確定爲什麼Firefox做到這一點，但我總是遇到這個問題，並且我最後一次解決方案是設置border: none;並添加一個（輸入像）img作爲背景，僞造一個輸入字段，這樣每個輸入將會是相同的大小。順便說一句，如果我沒有錯，Opera也會有另一個問題。

來源

2013-01-04 11:14:14 Toping

確實，它似乎是邊界問題，以及firefox如何度量它的問題。我已經讀過盒子大小應該解決這個問題，但是我沒有使用它，或者它只是無法正常工作。 – art2

我已經嘗試了很多東西，比如css重置，固定值，css破解......最後一個醜陋的工作，但不像使用圖像那樣美麗。 – Toping

似乎像firefox正在向左和右添加1px的填充 – art2

爲什麼firefox顯示框與Safari，IE，Chrome等不同？

回答

相關問題