消除文本行之间的间隙答案

【问题标题】：Eliminate gap between lines of text消除文本行之间的间隙
【发布时间】：2010-10-18 20:13:54
【问题描述】：

当您增加元素的行高时，您会开始在每行文本之间出现间隙。大多数情况下这很好，因为您看不到具体的差距。

但是当您的列很窄并且链接跨越多行时，就会出现问题。如果将鼠标移到链接上，行之间会有一个小间隙，这会使链接悬停效果闪烁。

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

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.

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

【问题讨论】：

“但是当文本较大时它不起作用；我需要更多填充”到底是什么意思？你能举个例子吗？不使用相对单位进行填充修复吗？
您可能可以使用带有上述链接的 Firebug 进行尝试（现已修复）。如果您为链接添加背景，您会看到间隙。现在增加填充，间隙消失。现在增加字体大小，差距再次出现。所以填充有时有效，但并不可靠。

标签： css text

【解决方案1】：

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

【讨论】：

不是一个糟糕的解决方案。这种情况下的问题是，当鼠标在“生成的框”中但实际上不在链接上方（即行的右侧）时，会出现悬停效果。

【解决方案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>

【讨论】：

我不确定这是否是故意的，但是在您的跨度 {} 中，第二个显示：inline-block 会否决 -moz-inline-block？
是的。之所以如此，是因为 ffx 2 不支持 inline-block，所以你需要 hack，但 ffx 3 确实支持它，所以将 inline-block 放在最后确保它被应用

【解决方案3】：

使用相对单位设置填充。

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

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

【讨论】：