Chrome瀏覽器CSS下劃線顯示Bug詳解及修復建議
本文將討論在Chrome瀏覽器測試新的CSS屬性text-decoration-thickness和text-underline-offset時遇到的兩個問題。
目錄
默認下劃線不一致
在一個簡單的網頁中添加文本鏈接，設置字體為Arial，然後比較不同瀏覽器和操作系統下的下劃線顯示效果。結果顯示，不同瀏覽器默認的下劃線粗細和垂直位置（基線偏移量）不一致。這符合CSS文本裝飾模塊的規定，該模塊指定了以下默認行為（auto值）：
用戶代理選擇合適的文本裝飾線粗細。 [...] 用戶代理選擇合適的下劃線偏移量。
覆蓋瀏覽器默認樣式
兩個新CSS屬性可以精確定義下劃線的粗細和偏移量：
text-decoration-thickness
text-underline-offset
使用這兩個屬性，即使在Firefox（Gecko引擎）和Safari（WebKit引擎）等不同瀏覽器上，也能創建一致的下劃線效果。
h1 {
text-decoration: underline;
text-decoration-thickness: 0.04em;
text-underline-offset: 0.03em;
}注意： text-decoration-thickness屬性還有一個特殊的from-font值，指示瀏覽器使用字體本身的首選下劃線寬度（如果可用）。經測試，不同字體的下劃線效果仍然不一致。
Chrome Bug 1：macOS系統下下劃線過細
如果將text-decoration-thickness屬性設置為一個計算結果為非整數像素值的字體相關長度值，Chrome瀏覽器會向下取整，而不是四捨五入。例如，如果聲明的粗細為0.06em ，計算結果為1.92px ，Chrome會繪製1px粗細的下劃線，而不是2px。此問題僅限於macOS系統。
a {
font-size: 2em; /* 計算結果為32px */
text-decoration-thickness: 0.06em; /* 計算結果為1.92px */
}截圖顯示，Chrome瀏覽器（第三行）中的文本裝飾線比Safari和Firefox瀏覽器中的細兩倍。
更多信息請參考Chromium問題#1255280。
Chrome Bug 2：下劃線位置過低
text-underline-offset屬性允許精確設置字母基線與下劃線之間的距離（下劃線相對於基線的偏移量）。不幸的是，Chrome瀏覽器目前沒有正確實現此功能，導致下劃線位置過低。
h1 {
text-decoration: underline;
text-decoration-color: #f707;
/* 禁用“跳過墨水” */
-webkit-text-decoration-skip: none; /* Safari */
text-decoration-skip-ink: none;
/* 覆蓋整個下沉線*/
text-decoration-thickness: 0.175em; /* 下沉線高度*/
text-underline-offset: 0; /* 基線無偏移*/
}由於此Bug，無法將下劃線完全移到基線上。
更多信息請參考Chromium問題#1172623。
注意：如上圖所示，Safari瀏覽器在下沉線頂部而不是底部繪製下劃線。這是一個WebKit Bug，最近已修復。此修復程序應包含在Safari的下一個版本中。
如何幫助優先解決Chrome瀏覽器Bug
用於設置下劃線樣式的兩個新的CSS屬性是CSS的歡迎補充。希望這兩個相關的Chrome Bug能夠盡快得到修復。如果這些CSS功能對您很重要，請在Chromium的Bug跟踪器中為這些Bug添加星標，以表達您的關注。
以上是CSS強調太薄，鉻太低的詳細內容。更多資訊請關注PHP中文網其他相關文章！
