火狐瀏覽器VS CONTENTEDITABLE填充

在這個例子：http://jsfiddle.net/kyhvW/火狐瀏覽器VS CONTENTEDITABLE填充

#test1 { 
    position:absolute; 
    font-size:10px; 
    font-family:arial; 
    background:black; 
    padding:2px; 
    border-radius:2px; 
    color:white; 
} 

<span id="test1" contentEditable="true"></span>

在Chrome中，我得到15px的高大背景在我的字體是7px的高大與頂部和底部4PX填充。這就是我希望它在其他瀏覽器上顯示的方式（儘管奇怪的是它不是帶有2px填充的10px字體。）

在Firefox中，我在輸入任何文本之前查看4px高的背景。一旦我放入文本，該框擴展到18px，底部6px填充，頂部5px填充和7px字體。我怎樣才能使這個工作與FF而不會搞亂Chrome？

要糾正FF中4px高的背景問題，我嘗試使用min-height:15px。不是在兩個瀏覽器中使框均勻爲15px，而是決定在FF和Chrome中使框高19px，僅在chrome中是7px字體，頂部4px填充，底部8px填充，FF中的字體爲7px頂部5px填充，底部填充7px。（使用min-height:11px讓我15px的盒子在FF之前，我部18px後輸入文字，然後，而在Chrome前後撐15px的。）

來源

2014-01-06 arby

Like [this？]（http://jsfiddle.net/kyhvW/6/） – Cilan

@ManofSnow具有固定高度，背景不隨自動contentEditable調整大小而增大。（http://jsfiddle.net/Saw6G vs http://jsfiddle.net/eq36e）。此外，它在Chrome瀏覽器中的顯示效果仍然不同於FF - http://i.imgur.com/HXhTcz8.png。在FF中，與Chrome相比，底部填充的字體通常會有太多的填充，現在它具有固定的高度，與Chrome相比，它突然間填充了太多填充。瘋狂。 – arby

啊哈，我發現使用的line-height和min-height組合的可行的解決方案。這給了我一個15px的盒子，在FF和chrome的頂部/底部有4px的填充。 http://jsfiddle.net/4wemJ/

來源

2014-01-06 05:21:51 arby

火狐瀏覽器VS CONTENTEDITABLE填充

回答

相關問題