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

Question

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

这是一个很好的示范问题（image + 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

行高将接受'none'值，因此您可以设置它并且它可以工作（如果它是display：block），但是（至少在Chrome中，chrome，safari和ff），任何内联之间的间隔为1px线。因此，在下面的解决方案中，我只是在跨度上添加了1px的填充顶部以调整该间隙。我有点hacky，但它完成了工作。你会想要做更多的浏览器测试。它可以通过Chrome和ff的浏览器缩放进行相当好的缩放，但在野生动物园中以非常大的缩放率获得一点点。

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>