FF/IE和Chrome之間的CSS文本下劃線渲染區別

Question

我有問題。在下面的URL中，我有一組h1，h2和p元素以及它們各自的CSS樣式。 h1元素具有文字修飾下劃線。

http://nostalgia.mx/light2.html

打開該網站既火狐+ IE和Chrome和你會發現深刻分歧：

1.-火狐+即讓下劃線成正比元素的字號被強調，這非常聰明。 Google保持精簡和不成比例。

2.- firefox + ie'fuse'或'meld'文本本身帶有下劃線，所以剪影是一個單獨的部分，這是非常好的。另一方面，Chrome不會。

好的。所以我的問題是：

是否有可能使鉻看起來像FF/IE的？

問候 Sotkra

Answer 1

現象可通過簡單的設置來觀察，你只是有一個大的字體大小的元素，你就可以設置text-decoration: underline。瀏覽器以不同的方式對下劃線的寬度執行此操作。在CSS中沒有辦法影響這個。 CSS3文本草案與此無關，即使它具有影響其他下劃線特徵的屬性。在討論中，a property for setting underline has been proposed。

如果你想通過使用border-bottom模擬下劃線，你可以在標記和CSS中增加一些額外的複雜因素來設置寬度（以及顏色和位置）。例如：

標題

與風格

H1 {字體大小：150像素; } h1 {border-bottom：solid 0.05em;顯示：inline-block; } h1 span {position：relative;頂部：0.2em; }

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

在這種方法中，你需要採取設置在同一行的標題和使用合適的頂部和底部邊緣（可能與其他元素的設置，也許包裹內的元素的護理div容器），因爲display: inline-block刪除了正常的標題渲染風格。