FF/IE和Chrome之间的CSS文本下划线呈现差异

我有个问题。在下面的url中，我有一组h1、h2和p元素，它们具有各自的css样式。h1元素具有文本装饰下划线

使用firefox+ie和chrome打开站点，您会发现其中的深刻区别：

1.-firefox+ie使下划线与下划线元素的大小成比例，这非常聪明。谷歌保持精简，不成比例

2.-firefox+ie将文本本身与下划线“融合”或“融合”，使轮廓成为一个整体，非常漂亮。另一方面，铬则不然

嗯。所以我的问题是：

有可能使Chrome看起来像FF/IE吗

问候

---

Sotkra

这种现象可以在一个简单的设置中观察到，您只需使用一个大字体的元素，然后在其上设置

文本装饰：下划线

。关于下划线的宽度，浏览器以不同的方式实现这一点。在CSS中没有办法影响这一点。CSS3文本草案对此一无所知，尽管它具有影响下划线其他特性的特性。在讨论中

如果您希望使用

边框底部

模拟下划线，您可以在标记和CSS中设置宽度（以及颜色和位置），这会增加一些额外的复杂性。例如：

标题 有风格

h1{字体大小：150px；} h1{边框底部：实心0.05em；显示：内联块；} h1跨距{位置：相对；顶部：0.2em；}

演示：

---

在这种方法中，您需要注意在一行上设置标题，并使用适当的上下边距（可能与其他元素的设置一起，可能将元素包装在

div

容器中），因为

display:inline block

删除了正常的标题渲染样式。

这种现象可以在一个简单的设置中观察到，在该设置中，您只需使用一个大字体的元素，然后在其上设置

文本装饰：下划线。关于下划线的宽度，浏览器以不同的方式实现这一点。在CSS中没有办法影响这一点。CSS3文本草案对此一无所知，尽管它具有影响下划线其他特性的特性。在讨论中

如果您希望使用
边框底部
模拟下划线，您可以在标记和CSS中设置宽度（以及颜色和位置），这会增加一些额外的复杂性。例如：

标题
有风格

h1{字体大小：150px；}
h1{边框底部：实心0.05em；显示：内联块；}
h1跨距{位置：相对；顶部：0.2em；}

演示：

在这种方法中，您需要注意在一行上设置标题，并使用适当的上下边距（可能与其他元素的设置一起，可能将元素包装在
div
容器中），因为
display:inline block
删除了正常的标题渲染样式。
Yes，更深入的搜索显示当前不支持调整下划线设置。但我之前看到的仍然让我感到困惑。也许这完全是另一回事，糟糕的记忆让它看起来似乎与此有关。无论如何，我将不得不像最初担心的那样，使用边界重现效果。谢谢。是的，更深入的搜索显示目前不支持调整下划线设置。但我之前看到的仍然让我感到困惑。也许这完全是另一回事，糟糕的记忆让它看起来似乎与此有关。无论如何，我将不得不像最初担心的那样，使用边界重现效果。谢谢你。