CSS文本下划线在FF / IE和Chrome之间的渲染差异 [英] CSS text-underline rendering difference between FF/IE and Chrome
问题描述
我有一个问题。在以下url中，我有一组h1，h2和p元素及其各自的css样式。 h1元素具有文本装饰下划线。
I have a question. In the following url I have a set of h1,h2 and p elements with their respective css styling. The h1 element has text-decoration underline.
http：/ /nostalgia.mx/light2.html
使用firefox + ie和chrome打开网站，您会注意到深刻的区别：
Open the site with both firefox+ie and chrome and you'll notice the profound differences:
1.- firefox + ie使下划线与下划线元素的字体大小成正比，这是非常聪明的。 Google保持精简和不成比例。
1.- firefox+ie make the underline proportional to the fontsize of the element being underlined, which is very smart. Google keeps it thin and un-proportional.
2.-firefox +即'保险丝'或'meld'文本本身与下划线，所以剪影是一个单一的，这是非常好的。但另一方面，Chrome却没有。
2.- firefox+ie 'fuse' or 'meld' the text itself with the underline so the silhouette is one single piece, which is very nice. Chrome on the other hand does not.
确定。所以我的问题是：
OK. So my question is:
是否可以让Chrome看起来像FF / IE的？
Is it possible to make Chrome's look like FF/IE's?
$ b Sotkra
Regards Sotkra
推荐答案
这种现象可以在一个简单的设置中观察到，你只需要一个大字体元素，设置 text-decoration：underline 。浏览器对于下划线的宽度以不同的方式实现这一点。没有办法在CSS中影响这一点。 CSS3文本草案没有什么关于这一点，即使它有属性影响其他功能的下划线。在讨论中，已提议设置下划线的属性 。
The phenomenon can be observed in a simple setting where you just have an element with a large font size and you set text-decoration: underline on it. Browsers implement this in different ways regarding the width of the underline. There is no way to affect this in CSS. The CSS3 Text draft has nothing about this, even though it has properties for affecting other features of underlining. In discussions, a property for setting underline has been proposed.
如果你想使用 border-bottom 来模拟下划线，你可以使用一些额外的复杂功能和CSS，设置宽度（和颜色和位置）。示例：
If you wish to simulate underlining by using border-bottom, you can, with some extra complications in markup and CSS, set the width (and color and position). Example:
符合样式
h1 {font-size：150px; }
h1 {border-bottom：solid 0.05em; display：inline-block; }
h1 span {position：relative;顶部：0.2em; }
h1 { font-size: 150px; } h1 { border-bottom: solid 0.05em; display: inline-block; } h1 span { position: relative; top: 0.2em; }
演示： http://jsfiddle.net/ yucca42 / Qdeek /
在这种方法中，您需要注意在一行上设置标题，并使用合适的顶部和底部边距其他元素的设置，也许包装在 div 容器中的元素），因为 display：inline-block
In this approach, you would need to take care of setting the heading on one line and using suitable top and bottom margins (probably with settings on other elements, maybe wrapping the element inside a div container), since display: inline-block removes normal heading rendering style.
这篇关于CSS文本下划线在FF / IE和Chrome之间的渲染差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
