下划线超链接 - 文本装饰与边框底部和浏览器不一致答案

【问题标题】：Underlining Hyperlinks - Text-decoration vs. Border-bottom and Browser Inconsistencies下划线超链接 - 文本装饰与边框底部和浏览器不一致
【发布时间】：2012-03-15 06:41:50
【问题描述】：

我不是默认文本装饰的忠实粉丝。我通常将其设置为“none”，然后在“a”上执行“border-bottom: 1px dotted somecolor”和在“a:hover”上执行“border-bottom:1px solid someothercolor”

我最近注意到一些我认为以前没有发生过的事情。即使在文本的

上有 padding-bottom

容器设置为 0，字母底部和我的边框底部之间的垂直空间太大。

更奇怪的是，Chrome 似乎仍然表现良好并尊重我的 0 填充，但 Firefox 和 IE 似乎增加了大约 4 或 5 像素的垂直空间。

当我暂时恢复到“文本装饰：下划线”时，我仍然看到太多空间。

知道这里发生了什么吗？

【问题讨论】：

你能发布一个例子，也许是一个 jsFiddle 吗？
这可能取决于字体、行高、填充设置和其他因素。请提供更多信息。
（此处为操作）嗯。当我尝试在 jsFiddle 复制问题时，它运行良好。我查看了我网站上的 CSS，但没有发现任何明显错误。我将 line-height 设置为 1.6em，但这不会破坏 jsFiddle 的内容；垂直对齐：基线也没有。据我所知，所有相关的填充和边距都设置为 0。

标签： css

【解决方案1】：

我敢打赌罪魁祸首是 inline-block 作为显示设置。在 http://jsfiddle.net/s8FYS/6/ 上查看差异（在 Firefox 中）。

编辑：进一步调查显示，inline Firefox（查看 Firebug）将 height 设置为 auto，最终小于实际的 line-height，而 inline-block计算等于line-height * font-size 的height（因为它现在表现得像block），这会将border 向下推。

您可以通过设置height 来“补偿”它（在this fiddle 中，1.35em 与16px 的默认font-size 一起使用），但我不确定这样做是否一定会始终正确补偿。

【讨论】：

是的，将显示设置为 inline-block 并将高度设置为 18px 对我有用。 Border-bottom 正好出现在 Firefox、Chrome 和 IE 中我想要的位置。谢谢！
@user249493——只是好奇：如果有人将浏览器设置为缩放字体高度（而不是缩放整个页面），您是否测试过它的外观？我认为 18px 的固定高度可能会看到您的边框再次出现间隙（例如 10px 字体）或在一些截断的文本中间（例如 24px 字体）。很可能某种类型的em 单位更适合设置高度，这样如果用户确实有字体缩放，那么边框应该移动。
该死！我有一种感觉，我在使用 px 而不是 em 时遇到了麻烦。你是对的 - 当字体被缩放（向上或向下）时，边框间隙是错误的。 1.4em 似乎是正确的。让我缩小到 10 像素的默认浏览器字体大小，至少到 26 像素。在 Firefox 中看起来不错；需要测试其他人。

【解决方案2】：

改变行高，例如：

a{ 行高：1em; }

【讨论】：