Firefox vs Chrome contenteditable padding

Question

On this example: http://jsfiddle.net/kyhvW/

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

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

In Chrome, I get a 15px tall background where my font is 7px tall with 4px padding on top and bottom. This is how I want it to display on other browsers (though, it's strange it's not a 10px font with 2px padding.)

In Firefox, I'm looking at a 4px tall background before any text is entered. Once I put text in it, the box expands to 18px with 6px padding on bottom, 5px padding on top, and a 7px font. How can I make this work with FF without messing it up for Chrome?

To correct the 4px tall background issue in FF, I've tried using min-height:15px. Rather than making the box uniformly 15px across both browsers, it decides to make the box 19px tall in FF and Chrome, only in chrome it's a 7px font with 4px padding on top and 8px padding on bottom, where in FF it's a 7px font with 5px padding on top and 7px padding on bottom. (Using min-height:11px gets me a 15px box in FF before I enter text, then 18px after, while in Chrome stays 15px before and after.)

@ManofSnow With a fixed height, the background doesn't grow with the automatic contentEditable resizing. (jsfiddle.net/Saw6G vs jsfiddle.net/eq36e). Also, it still looks different in Chrome than FF -- i.imgur.com/HXhTcz8.png. In FF the font usually has too much padding on the bottom compared with Chrome, now with a fixed height, it suddenly has too much padding on top compared with Chrome. Madness. — iRyanBell

iRyanBell iRyanBell · Accepted Answer · 2014-01-06T05:21:51

Aha, I found a workable solution using a combination of line-height and min-height. This gives me a 15px box with 4px padding on top / bottom in FF and chrome. http://jsfiddle.net/4wemJ/

Firefox vs Chrome contenteditable padding

1 Answers