在我的网站上(晚上)注入“数据对比”的是谁或什么，以及如何阻止它？

Question

我已经注意到，我帮助的一个网站有时在注入span元素时会出现问题。这些跨度将打破空白空间，使文本难以阅读。这些跨度看起来是这样的：

<span data-contrast="auto">words</span>
<span data-contrast="auto">,</span>
<span data-contrast="auto">b</span>
<span data-contrast="auto">ut</span>
<span data-contrast="auto">sometimes also only single chars</span>

该网站使用/由WordPress运行，但这似乎不是原因，因为受影响的帖子看起来很好，并且在post编辑器或数据库中没有显示任何标记。

而且，这些跨度似乎只发生在夜间。我试着把它弄清楚，但就像很多时候一样，我还不能真正证实它，因为它没有再次发生在我身上，甚至在晚上也没有发生。现在一切都很好，所有这些跨度都没有出现。

我猜想这与浏览器中的夜间模式(尽管在Edge和Firefox中的行为相同)或Windows中的夜间模式有关，但另一方面，我还没有在任何其他页面上注意到这一点。

因此，这是有点奇怪和难以确定，但你会发现复制的文本包含相同的标记，时，您使用搜索引擎和搜索“数据对比跨度”。所以，至少我不是唯一有这个问题的人。

有什么办法把这件事搞清楚，找出原因吗？

Answer 1

浏览器插件通常被授予在运行时修改页面源的权限。我猜罪魁祸首是像夜眼或暗读物这样的跨浏览器扩展。

通常，添加一个<span>不应该扰乱您的布局，除非您的CSS正在改变span属性，而不是浏览器默认设置。

备选案文1

可能会通过添加CSS来控制布局的外观来解决这个问题：

span[data-contrast="auto"] {...} 

它将选择具有该数据属性的所有跨度。然后添加样式以抵消您看到的布局问题。说，由于扩展是在页面呈现后添加代码，所以它可以覆盖您所做的任何操作.

选项2

一个更好的解决方案是创建你自己的黑暗模式。如果您提供自己的主题选项，大多数插件/OS夜间模式都不会影响您的代码。的“黑暗”主题是移动响应的2020年版本；您应该在代码中提供它，或者在用户、浏览器制造商和操作系统做出自己的决定时承担后果。

如果您需要帮助创建另一个主题，CSS魔法师写得很好。

Answer 2

由于不清楚他们是从哪个软件复制的，所以当我从微软团队或SharePoint中打开的Word文档复制，然后直接粘贴到网站的编辑器(我们的站点使用TinyMCE文本编辑器，这是一个常用的免费文本编辑器)时，我亲身体验了这一点。

我的建议是:直接从桌面版本的Word复制，然后粘贴到编辑器中，这样就避免了“数据对比”的跨越。

我假设在Word Docs的非桌面版本中必须有一些隐藏的范围，以确保文档的显示方式与桌面版本相同。文本编辑器不知道如何处理它，所以它删除了所有的东西，但“数据对比”部分。

希望这能帮助到一些人，因为最初的帖子是一段时间前要求的。