在Chrome和Firefox中，特定行高的文字背景不一样

Question

我试图获得一个半透明的背景，＆＃34;跟随＆＃34;文本：即背景不应该是一个矩形框，而应该是一个“锯齿状的盒子”。在每个换行符停止。

像这样：

我使用以下样式执行此操作：

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;
}

这里可以看到一个例子：http://jsbin.com/texala/6

问题在于Firefox和Chrome以不同的方式呈现这些内容。这两个浏览器使用的是完全相同的.woff字体（不是.woff2），尝试cssreset.com的所有不同重置仍然无法正常工作。

问题

您可以在此处看到，每行的背景在Firefox中重叠，但在Chrome中不重叠。

我使用OS X 10.7.5和Firefox 35.0.1以及Chrome 40.0.22.14.111

我知道字体渲染不同于平台到平台和浏览器到浏览器，但是明确设置了行高和字体大小（和填充）（以像素为单位） - 这两个渲染中的一个是错误的？

此外 - 有没有人能解决这个问题，以便背景覆盖线条之间的所有空间而在Chrome和Firefox中没有重叠？

Answer 1

也许还有其他行高？：

p {line-height: 158%;}

Answer 2

在整个文档结构中定位CSS重置是关键。但是，具体来说，

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

修改

阅读使用EM和REM。它在各方面都优于像素。

p {线高度：1.61em};