如何停止行之间重叠的多行文本的透明背景？

Question

我遇到了一个问题，我有一个内联 <span> 包含多行文本，具有透明背景。尽管有默认的行高，但文本上的背景会重叠，从而导致背景重叠在自身上的较暗的水平行。

这里很好的演示了问题（图片+jsfiddle）

JsFiddle demonstrating this issue.

问题的最小再现

HTML：

<h1>
    <span>Although it is set to a line height of 1, the background behind text still overlaps between rows.</span> 
</h1>

CSS：

h1 {
    text-transform: uppercase;
    font-family: Arial;
    line-height: 1;
    font-size: 30px;
    background: rgba(0,0,0,0.5);
    color: #FFF;
    display: inline;
}
h1 span {
    position: relative;
}

解决方案要求

1. 背景颜色必须符合文字的形状；所以将span 设置为display:inline-block 不是一个可行的解决方案。
2. 设置固定的line-height（或padding）不是最佳答案，因为浏览器和用户设置之间的确切字体渲染会发生变化。例如，在 Chrome 中完美设置 line-height 会在 Firefox 中产生不完美的结果。
3. 文本必须是动态的和语义的。解决方案不能涉及在服务器上为客户端呈现文本的图像表示。
4. 最好允许添加或删除任意padding，以减少或增加文本与背景边缘之间的间距。
5. Javascript 可能没问题。我在这里使用 Angular 2，因此与它完美结合的答案会更好。

Answer 1

行高将接受“无”值，因此您可以设置它并且它可以工作（如果它是 display:block），但是（至少在 Mac 上的 chrome、safari 和 ff 中）任何内联的内容之间都有 1px 的间隙线。所以在下面的解决方案中，我只是在跨度上添加了一个 1px 的填充顶部来调整该间隙。我有点hacky，但它完成了工作。显然，您需要做更多的浏览器测试。它在 chrome 和 ff 上的浏览​​器缩放时可以很好地缩放，但在 safari 上非常大的缩放率时会有所下降。

h1 {
    text-transform: uppercase;
    font-family: Arial;
    line-height: none;
    font-size: 30px;
    color: #FFF;
}
h1 span {
  background: rgba(0,0,0,0.5);
  line-height: inherit;
  display: inline;
  padding-top: 1px;
}

<h1>
    <span>Although it is set to a line height of 1, the background behind text still overlaps between rows.</span> 
</h1>