如何在拼写错误的单词 HTML 下放置波浪线答案

【问题标题】：How to put a waved line under misspelled words HTML如何在拼写错误的单词 HTML 下放置波浪线
【发布时间】：2011-10-12 21:02:49
【问题描述】：

我有一个网页 HTML 和 JS。

我需要在拼写错误的单词下方添加一条红色波浪线。我有我的算法来检测这些词，但我只需要知道如何在这些词下放置一条波浪线。

【问题讨论】：

【解决方案1】：

实际上，仅使用 CSS 并没有标准的卷曲下划线，但请查看本教程，了解如何自己创建一个：

.curly-underline {
    background: url(underline.gif) bottom repeat-x;
}

【讨论】：

【解决方案2】：

如果你不想用 gif 画卷曲下划线，你可以用纯 css 来做：

<span style="border-bottom: 1px dotted #ff0000;padding:1px">
    <span style="border-bottom: 1px dotted #ff0000;">
        foobar
    </span>
</span>

（或运行JSFiddle）

【讨论】：

【解决方案3】：

红色波浪下划线非常简单，如 CSS 3 的 Text Decoration Module 中所指定。

* { text-decoration: underline wavy red; }

Run me in Chrome or Firefox to see me ride over a red wave!

浏览器支持正在迎头赶上。你可以 vote for it Microsoft Edge，我鼓励你这样做。

规范并不新； Firefox 自 2016 年以来一直支持它since 2011 和 Chrome。希望我们也可以指望 Safari 和 Edge 尽快支持它。

2017 年更新：Chrome 已经在 2016 年解决了这个问题，我已经用 Chrome 58 对其进行了测试，它可以工作，并且大大提升了波浪线。

【讨论】：