Text background with specific line-height not the same in Chrome and Firefox

Question

I'm trying to get a semi-transparent background that "follows" the text: i.e. the background should not be a rectangular box, but rather a "jagged box" that stops at each linebreak.

Like this:

I do this with the following style:

p {
  display: inline;
  background-color: rgba(0, 0, 0, 0.5); 

  font-family: "Montserrat";
  font-size: 18px;
  /* Add spacing between lines */
  line-height: 28px;
  /* Make sure background covers space between lines */
  padding-bottom: 6px;
}

An example can be seen here: http://jsbin.com/texala/6

The problem is that Firefox and Chrome renders these differently. The two browsers are using the exact same .woff font (not .woff2) and trying all different resets from cssreset.com still doesn't work.

The problem

What you can see here is that the background from each line is overlapping in Firefox but not in Chrome.

I'm using OS X 10.7.5 with Firefox 35.0.1 and Chrome 40.0.22.14.111

I know that font rendering is different from platform to platform and browser to browser, but with an explicitly set line-height and font-size (and padding) in pixels -- isn't one of these two renderings wrong?

Furthermore - does anyone have a solution to this problem so that the background covers all the space between the lines with no overlap in both Chrome and Firefox?

Answer 1

Positioning of the CSS reset within the entire document structure is key. However, for this specifically,

p{display:inherit;text-align:justify};

Edit

Read up on using EM and REM. It is superior to pixels in every way.

p{line-height:1.61em};

Answer 2

Maybe with other line-height?:

p {line-height: 158%;}