CSS強調太薄，鉻太低

Chrome瀏覽器CSS下劃線顯示Bug詳解及修復建議

本文將討論在Chrome瀏覽器測試新的CSS屬性text-decoration-thickness和text-underline-offset時遇到的兩個問題。

目錄

• 默認下劃線不一致
• 覆蓋瀏覽器默認樣式
• Chrome Bug 1：macOS系統下下劃線過細
• Chrome Bug 2：下劃線位置過低
• 如何幫助優先解決Chrome瀏覽器Bug

默認下劃線不一致

在一個簡單的網頁中添加文本鏈接，設置字體為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中文網其他相關文章！