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中文网其他相关文章！