pCloud Partner Program

'underline'相關日誌共 1 篇

  1. 2018/06/06 Google Chrome連結底線破裂調整

Google Chrome連結底線破裂調整

程式技術 2018/06/06 14:11
views: 99092 times
話說 Google Chrome 有個底線在有下區間英文字, 如 p, g, q 等會出現斷裂的狀況, 經查原因為 Google Chrome 於 64 版本起, 開始支援 text-decoration-skip-ink 為 auto 了, 所以發生這個狀況:

用戶插入圖片


如何解決呢, 當然就是將其屬性設定為 none 即可. 如下:

.noskipink{
  text-decoration-skip-ink: none;
}

由於預設連結也會有用到底線, 所以一勞永逸的方式就是把 a 元素的該屬性設定起來即可. 這個在 firefox 與 IE 沒有問題.

看起來也不是 chrome 問題. 而是在 css 4 版本起有這個 tag (draft), 而 chrome 64 起支援了, 所以就發生破裂的狀況, 而其他瀏覽器不支援所以不會有這個破裂的現象.

範例與測試請連結: https://codepen.io/timhuang/pen/XYKaNO

參考資料:
https://superuser.com/questions/1293529/when-did-chrome-start-underlining-links-differently
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/47BHtmz0jVY
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink


top




AGI 亞奇雷 240GB 2.5吋 SATA3 SSD 固態硬碟
TEAM十銓 L5 Lite 3D 1TB 2.5吋 SSD固態硬碟
統一 番茄汁(6入/組)


 Waiting...