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

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 )不是最佳答案，因为浏览器和用户设置之间的确切字体呈现会发生变化。设置 line-height例如，在 Chrome 中完美会在 Firefox 中产生不完美的结果。
3. 文本必须是动态的和语义化的。解决方案不能涉及在服务器上为客户端呈现文本的图像表示。
4. 最好允许任意 padding添加或删除以减少或增加文本与背景边缘之间的空间。
5. Javascript 可能没问题。我在这里使用的是 Angular 2，因此与其完美集成的答案会更好。

Answer 1

行高将接受一个“无”值，所以你可以设置它并且它可以工作(如果它是显示: block )，但是(至少在 chrome，safari 和 ff on Mac 中)任何内联的东西之间有 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>