消除文本行之间的差距

Question

当您增加元素的行高时，您会开始在每行文本之间获得间隙。大多数时候这很好，因为你没有看到具体的差距。

但是当你有一个狭窄的列，并且链接在多行上运行时，这是有问题的。如果将鼠标移到链接上，则线条之间会有一个小间隙，这会使链接悬停效果闪烁。

从设计/可用性的角度来看，我觉得这会带来糟糕的用户体验（没有人喜欢随机闪烁）。试试吧：

  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est. Nunc aliquam, eros a aliquam consequat, ante diam rutrum risus, et dignissim ligula turpis et ante. Maecenas leo neque, euismod in, aliquam et, molestie ac, ligula. Integer venenatis. Pellentesque enim. Maecenas aliquet, tortor at molestie sodales, urna velit pulvinar lorem, ac malesuada nibh turpis eu tortor.

我可以在链接中添加一些填充以防止在某些情况下发生这种情况，但是当文本较大时它不起作用;我需要更多填充。有人有解决方案的想法吗？

Answer 1

尝试通过为该窄列中的<a>元素设置display：block来修复闪烁问题。

Answer 2

如果您知道每条线的起点和终点，您可以在每条线上放置一个跨度，并将其转换为内联块

#wrap {font-size:14px; line-height:16px;}
a span{display:-moz-inline-block; display:inline-block;line-height:14px;padding:1px 0;}
a:hover {background:red;}

<div id="wrap">
dsvlaksvh; asvj asdfh;dhldv hd d dl h dfhd d dfh; daljfda k;d <a href="#" >
<span>hdv </span><span>dvh ldvhldf dhk </span><span>;dhkdf hdl hdfk 
</span><span>dfhkldf h vkhg j</span></a> glj gj f gjl fjl fj f
    </div>

Answer 3

使用相对单位设置填充。

使用Firebug / Dragonfly将padding: 0.2ex 0; background: red;添加到问题中的示例链接对我来说很合适，无论字体大小（通过CSS设置或放大）。

在Firefox中更改字体大小的唯一问题是背景开始重叠前一行;但这是一个line-height问题。