css - 虚线下划线无法在 Chrome 中正确呈现

Question

使用 Chrome 65，看起来 text-decoration: underline dotted; 会产生不雅的结果:

而在 Firefox 上，我得到了预期的结果:

chrome 有什么问题？

---

我通过进一步测试扩展了代码段。它似乎只对某些字体大小和字体失败。特别是此处使用 Trebuchet MS 和 18px 字体大小。

span{
  text-decoration: underline dotted;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  padding: 1rem;
  background-color: black;
  color: white;
  display: inline-block;
  margin: 1rem;
}

<span style="font-size: 12px;">
  A 12px button of some sort
</span>

<span style="font-size: 14px;">
  A 14px button of some sort
</span>

<span style="font-size: 16px;">
  A 16px button of some sort
</span>

<span style="font-size: 18px; background-color: darkRed;">
  A 18px button of some sort
</span>

<span style="font-size: 20px;">
  A 20px button of some sort
</span>

Answer 1

使用 text-decoration-skip-ink: none(在 https://crrev.com/514104 中默认更改为 auto。)

如果仔细观察，下划线中的间隙对应于字母底部的环，非常靠近字体的基线。 skip-ink 算法似乎选择在此处切断下划线——但仅适用于点线和虚线，并且仅适用于某些字体大小。

https://crbug.com/808603表明根本原因是点和破折号有两个像素高。