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

前端之家收集整理的这篇文章主要介绍了html – 避免在应用了背景颜色的内联元素中重叠行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

在第二段中,行实际上更接近(如我所愿)但不幸的是每一行也与前一行部分重叠(除非你删除了应用的背景颜色)并且这不好(例如,请参阅底部的“大写”字样),所以这里我的问题:

>如何让行更接近(如右边的段落),而不会相互重叠并定义背景颜色(无论应用它的元素,但它必须保留在文本下面,而不是填充整个块)
>或者,有一种方法可以为每行文本添加水平填充?

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

先感谢您. =)

编辑:
关于第二个问题,使用@thirtydot解决方案我可以使用空白区域添加空间(在右侧):在span元素上应用预包装

最佳答案
只需在em中添加一个包装元素(例如span),然后应用position:relative.

见:http://jsbin.com/axefaf

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

猜你在找的HTML相关文章