pCloud Partner Program

Google Chrome連結底線破裂調整

程式技術 2018/06/06 14:11
views: 33171 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

Trackback Address :: http://diary.tw/tim/trackback/1207

Write a comment


PREV : [1] : [2] : [3] : [4] : [5] : [6] : ... [492] : NEXT



DJI Tello 小米萬能遙控器 手機App操控
Microsoft Office 365 中文家用版PKC (無光碟) ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U
美國 VORNADO 533 渦流空氣循環機 (黑色) 御茶園 每朝健康綠茶(650mlx24入)
每朝健康 雙纖綠茶(650mlx24入)


 Waiting...