是谁或什么东西将 "data-contrast" 跨度注入我的网站（在晚上）以及如何阻止它？
Who or what is injecting "data-contrast" spans into my website (at night) and how to stop it?
我注意到，我正在帮助的网站有时会在注入 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>
该网站是 运行 with/by WordPress，但这似乎不是原因，因为受影响的 post 看起来很好并且在 post编辑器或数据库。
此外，这些跨度似乎只发生在夜间。我试图确定它，但像往常一样，我还不能真正验证它，因为它没有再次发生在我身上，甚至在晚上也没有。现在一切都很好，none 这些跨度都存在。
我猜它与浏览器中的夜间模式有关（尽管 Edge 和 Firefox 中的行为相同）或 Windows 中的夜间模式但另一方面我还没有在任何其他页面上注意到这一点。
所以，这有点奇怪且难以确定，但是 you'll find copied texts that contain the same markup, 当您使用搜索引擎并搜索“data-contrast span”时。所以，至少我不是唯一遇到这个问题的人。
有什么想法可以解决这个问题并找出原因吗？
浏览器 plug-ins 通常在 运行 时被授予修改页面源代码的权限。我猜罪魁祸首是 cross-browser 扩展名，例如 Night Eye or Dark Reader.
一般来说，添加 <span> 不会弄乱您的布局，除非您的 CSS 改变了浏览器默认值之外的 span 属性。
选项 1
您可能可以通过添加 CSS 来控制布局的外观来解决此问题：
span[data-contrast="auto"] {...}
这将 select 所有具有该数据属性的跨度。然后添加样式以抵消您看到的布局问题。 也就是说，由于扩展是在页面呈现后添加代码，它可能会覆盖您所做的任何事情。
选项 2
更好的解决方案是创建您自己的深色模式。如果您提供自己的主题选项，大多数 plugins/OS 夜间模式都不会干扰您的代码。 “深色”主题是移动响应的 2020 版；您应该在您的代码中提供它，否则当用户、浏览器制造商和操作系统做出他们自己的决定时承担后果。
如果您在创建备用主题方面需要帮助，CSS Tricks has a good write up。
由于不清楚他们从什么软件复制，我亲身经历过从 Microsoft Teams 或 SharePoint 中打开的 Word 文档复制，然后直接粘贴到网站的编辑器（我们的网站使用TinyMCE 文本编辑器，一种常用的自由文本编辑器）。
我的建议：直接从桌面版 Word 复制，然后粘贴到编辑器中，这样可以防止出现“data-contrast”跨度。
我假设他们添加的 non-desktop 版 Word 文档中一定有一些隐藏的跨度，以确保文档以与桌面版本相同的方式显示。文本编辑器不知道如何处理它，所以它删除了所有内容，但“data-contrast”部分。
希望这对那里的人有所帮助，因为原来 post 是前段时间问过的。
我注意到，我正在帮助的网站有时会在注入 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>
该网站是 运行 with/by WordPress，但这似乎不是原因，因为受影响的 post 看起来很好并且在 post编辑器或数据库。
此外，这些跨度似乎只发生在夜间。我试图确定它，但像往常一样，我还不能真正验证它，因为它没有再次发生在我身上，甚至在晚上也没有。现在一切都很好，none 这些跨度都存在。
我猜它与浏览器中的夜间模式有关（尽管 Edge 和 Firefox 中的行为相同）或 Windows 中的夜间模式但另一方面我还没有在任何其他页面上注意到这一点。
所以，这有点奇怪且难以确定，但是 you'll find copied texts that contain the same markup, 当您使用搜索引擎并搜索“data-contrast span”时。所以，至少我不是唯一遇到这个问题的人。
有什么想法可以解决这个问题并找出原因吗？
浏览器 plug-ins 通常在 运行 时被授予修改页面源代码的权限。我猜罪魁祸首是 cross-browser 扩展名，例如 Night Eye or Dark Reader.
一般来说，添加 <span> 不会弄乱您的布局，除非您的 CSS 改变了浏览器默认值之外的 span 属性。
选项 1
您可能可以通过添加 CSS 来控制布局的外观来解决此问题：
span[data-contrast="auto"] {...}
这将 select 所有具有该数据属性的跨度。然后添加样式以抵消您看到的布局问题。 也就是说，由于扩展是在页面呈现后添加代码，它可能会覆盖您所做的任何事情。
选项 2
更好的解决方案是创建您自己的深色模式。如果您提供自己的主题选项，大多数 plugins/OS 夜间模式都不会干扰您的代码。 “深色”主题是移动响应的 2020 版；您应该在您的代码中提供它，否则当用户、浏览器制造商和操作系统做出他们自己的决定时承担后果。
如果您在创建备用主题方面需要帮助，CSS Tricks has a good write up。
由于不清楚他们从什么软件复制，我亲身经历过从 Microsoft Teams 或 SharePoint 中打开的 Word 文档复制，然后直接粘贴到网站的编辑器（我们的网站使用TinyMCE 文本编辑器，一种常用的自由文本编辑器）。
我的建议：直接从桌面版 Word 复制，然后粘贴到编辑器中，这样可以防止出现“data-contrast”跨度。
我假设他们添加的 non-desktop 版 Word 文档中一定有一些隐藏的跨度，以确保文档以与桌面版本相同的方式显示。文本编辑器不知道如何处理它，所以它删除了所有内容，但“data-contrast”部分。
希望这对那里的人有所帮助，因为原来 post 是前段时间问过的。