我不太喜欢默认的文本装饰。我通常将其设置为“none”，然后在“a”上执行“border-bottom:1px dotted somecolor”，在“a:hover”上执行“border-bottom:1pxsolid someothercolor”
我最近注意到一些我认为以前没有发生过的事情。即使将文本的
容器上的 padding-bottom 设置为 0，字母底部和边框底部之间的垂直空间也太多。
更奇怪的是，Chrome 似乎仍然表现良好并尊重我的 0 填充，但 Firefox 和 IE 似乎添加了大约 4 或 5 像素的垂直空间。
当我暂时恢复为“text-decoration:下划线”时，我仍然看到太多空间。
知道这里发生了什么吗？
最佳答案
我敢打赌罪魁祸首是 inline-block 作为显示设置。查看差异(在 Firefox 中):http://jsfiddle.net/s8FYS/6/ .
编辑:一些进一步的调查显示内联 Firefox(在Firebug中查看)将高度设置为auto最终小于实际的 line-height，而 inline-block 计算 height(因为它现在的作用类似于 block) 等于 line-height * font-size，这会将 border 向下推。
您可以通过设置 height (在 this fiddle 中，1.35em 使用我的默认 font-size 来“补偿”它> 16px)，但我不确定这样做是否一定能始终正确补偿。
关于css - 下划线超链接 - 文本装饰与边框底部和浏览器不一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9437118/