如何设置像Weather.com这样的拼写错误的文本（虚线下划线而不是波浪形）

Question

Weather.com是我所知道的唯一一个这样做的例子，在拼写错误的文本而不是曲线下显示红色虚线。这是在Windows 7中的Chrome上

我想要复制的内容

关于如何做到的任何想法？不幸的是，去检查员清除现场的文字。

大多数网站显示

Answer 1

这不是一种风格，而是一种精确大小的文本框/精确调整的线条高度的效果。曲线是2px高，但底部1px被切断，给它一个虚线的外观，但实际上它不是。

此方法可用于复制显示的效果 IF 您正在使用字体，其中延伸到基线以下的字母不会太低，以至于它们触及拼写检查波形。

似乎可以独立于文本移动波形，这可能会提供一种方法来用任何字体模拟这种风格。

如果我找到了办法，我会进一步更新。

Answer 2

这是一个浏览器功能，可以在输入字段和带有spellcheck="true"的contentEditable元素上实现（至少在Webkit / Blink中）。并非每个浏览器都以相同的方式实现它。为此，您必须自己与字典服务一起构建文本标记（例如Google Docs，例如）。

https://jsfiddle.net/bn7pfyf3/

（将＆＃34; true＆＃34; s更改为＆＃34; false＆＃34; s并且您没有看到焦点上的任何突出显示）

在Webkit / Blink中，这是一个DocumentMarker类型（用于Ctrl + F，高亮显示，输入字段中的拼写错误等）。它们不会暴露在DOM或CSS中。 https://github.com/crosswalk-project/blink-crosswalk/blob/master/Source/core/dom/DocumentMarker.h