避免在应用了背景颜色的内联元素中重叠行

Question

我得到了一个与这个小提琴相关的CSS问题：http://jsfiddle.net/r584e/
这里有相关的截图

有时我必须以这种方式设置内联元素的样式，试图几乎避免行之间的空间并仅在文本下应用背景。如您所见，第一段内部有一个链接，我在其中设置了line-height: 1em。右边的段落改为line-height: 0.8em;。 （注意：我知道这样我可以粗略地剪切一些字母 - 比如q，g，p，......但是文字是大写的，所以它不是真的有问题）

在第二段中，行实际上更接近（如我所愿）但不幸的是每一行也与前一行部分重叠（除非你删除了应用的背景颜色）并且这不好（例如，请参阅单词«uppercase»on在底部），所以我的问题在这里：

1. 如何让行更接近（如右边的段落），而不会相互重叠并定义背景颜色（无论应用它的元素，但它必须保留在文本下面，而不是填充整个块）
2. 可选择为每行文字添加水平填充？

随意更改CSS和/或标记。我正在寻找纯粹的 CSS 解决方法 最佳解决方案应该适用于现代浏览器，如果可能，至少可以使用IE8 +

提前谢谢你。 =）

修改：
关于第二个问题，使用@thirtydot解决方案我可以使用应用在span元素上的white-space: pre-wrap来添加空间（在右侧）

Answer 1

只需在em内添加一个包装元素，例如span，然后应用position: relative。

请参阅： http://jsbin.com/axefaf

<a href="#"><em style="line-height: 0.8em">
    <span>This is an uppercase multirow text inside a link element</span>
</em></a>

span {
    position: relative;
}

这适用于所有现代浏览器和IE8，但在IE7中不起作用。