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

Question

我有一个与此 fiddle 相关的 CSS 问题:http://jsfiddle.net/r584e/
这里是相关截图

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

在第二段中，行实际上更近了(如我所愿)，但不幸的是，每一行也与前一行部分重叠(除非你删除应用的背景颜色)，这不好(例如，看到“大写”这个词底部)，所以这是我的问题:

1. 我怎样才能使行更近(如右边的段落)而不相互重叠并定义背景颜色(无论应用它的元素如何，但它必须留在文本下方，而不是填充整个 block )
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。