如何在所有使用 css 的浏览器中使下划线大小相同？答案

【问题标题】：How to make the underlines the same size in all browsers with css?如何在所有使用 css 的浏览器中使下划线大小相同？
【发布时间】：2011-12-07 21:29:52
【问题描述】：

当我在 css 中有以下内容时，IE 和 Firefox 中链接下的下划线“加倍”。我已经看到一些网站具有相同的字体系列，相同的字体大小，粗体和下划线没有加倍。我怎样才能使下划线只有一行而不是两行（1px vs 2px）。一个适用于所有浏览器的简单 CSS（如果可能）。我知道我可以使用border-bottom 来解决问题，但我不太喜欢这个想法。

.a_12 {
font-family: arial;
font-size: 12pt;
font-weight: bold;
text-decoration: underline;
}

感谢您的帮助和建议

【问题讨论】：

标签： css underline

【解决方案1】：

您无法控制浏览器如何使用 CSS 呈现其文本下划线。如果您真的需要这种级别的控制，使用底部边框也无妨。

【讨论】：

即使浏览器之间可能有所不同，但比underline更好。
如果您的元素有任何类型的填充，边框“下划线”将表现不佳......

【解决方案2】：

尝试使用此属性：border-width: 1px 或使用border-bottom 属性

【讨论】：

【解决方案3】：

在其他几篇文章中建议的border-bottom 技术的替代方法是使用inset box-shadow，如下所示：

box-shadow: 0 -1px 0 0 inset;

省略color 参数默认为文本颜色。

【讨论】：