CSS文本 - 强调FF / IE和Chrome之间的渲染差异

Question

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

http://nostalgia.mx/light2.html

使用firefox + ie和chrome打开网站，你会注意到深刻的差异：

1.- firefox + ie使下划线与被加下划线的元素的字体大小成比例，这非常聪明。谷歌保持薄弱和不成比例。

2.- firefox +即'fuse'或'meld'文本本身带下划线，所以剪影是单件，这是非常好的。另一方面，Chrome没有。

行。所以我的问题是：

是否可以让Chrome看起来像FF / IE？

此致 Sotkra

Answer 1

这种现象可以在一个简单的设置中观察到，你只需要一个字体较大的元素并在其上设置text-decoration: underline。浏览器以不同的方式实现这一点，关于下划线的宽度。在CSS中无法影响这一点。 CSS3 Text草案对此没有任何意义，即使它具有影响下划线其他功能的属性。在讨论中，a property for setting underline has been proposed。

如果您希望使用border-bottom来模拟下划线，您可以在标记和CSS中使用一些额外的复杂功能来设置宽度（以及颜色和位置）。例如：

标题

带风格

h1 {font-size：150px; } h1 {border-bottom：solid 0.05em; display：inline-block; } h1 span {position：relative;上：0.2em; }

演示：http://jsfiddle.net/yucca42/Qdeek/

在这种方法中，您需要注意在一行上设置标题并使用合适的顶部和底部边距（可能使用其他元素的设置，可能将元素包装在div容器内），因为display: inline-block删除了正常的标题呈现样式。