强调超链接 - 文本修饰与边框底部和浏览器不一致

Question

我不是默认文字装饰的忠实粉丝。我通常把它设置为“无”，然后在'a：hover'上执行'a'上的“border-bottom：1px点缀somecolor”和“a-border：1px solid someothercolor”

我最近发现了一些我认为以前没有发生的事情。即使文本的

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

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

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

知道这里发生了什么吗？

Answer 1

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

编辑：进一步的调查显示，inline Firefox（查看Firebug）将height设置为auto，其结果小于实际line-height 1}}，而inline-block计算height（因为它现在的行为类似于block）等于line-height * font-size，这会推动border 1}}下来。

您可以通过设置height（this fiddle，1.35em使用font-size 16px的默认{{1}}来“补偿”它，但是我不确定这样做肯定会在任何时候都能正确补偿。

Answer 2

更改行高，例如：

  

a {line-height：1em; }