时间戳

首页 > 解决方案 > 谁或什么将“数据对比”注入我的网站（在晚上）以及如何阻止它？

html - 谁或什么将“数据对比”注入我的网站（在晚上）以及如何阻止它？

问题描述

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 运行，但这似乎不是原因，因为受影响的帖子看起来很好，并且在帖子编辑器或数据库中没有显示此标记的迹象。

此外，这些跨度似乎只发生在夜间。我试图确定这一点，但我经常无法真正验证它，因为它没有再次发生在我身上，甚至在晚上也没有。现在一切都很好，这些跨度都不存在。

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

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

有什么想法可以解决这个问题并找出原因吗？

标签： htmlcsscross-browser

解决方案

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

一般来说，添加 a<span>不应该弄乱你的布局，除非你的 CSS 将 span 属性更改为远离浏览器的默认值。

选项1

您可以通过添加 CSS 来控制布局的外观来解决此问题：

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

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

选项 2

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

如果您在创建替代主题方面需要帮助，CSS Tricks 有一篇很好的文章。

推荐阅读