javascript - 防止网站 CSS 干扰工具提示 CSS？

Question

我正在开发一个浏览器脚本，该脚本扫描页面中的关键字，突出显示它们，并在用户将鼠标悬停在它们上方时创建一个使用 AJAX 和 PHP 填充的工具提示。我遇到的唯一问题是显示工具提示的网站的 CSS 干扰了工具提示内容的 CSS。

工具提示使用 <img> , <p>和 <table>与 <tr>和 <td> .我的 PHP 文件将这些元素与我在 CSS 文件中设置样式的 ID 相呼应。我的 CSS 在维基百科等网站上正确显示，但其他网站会弄乱填充/边距/对齐。例如，某些网站可能对齐 <td>居中，而我希望它向左对齐。我已经为许多使用的 ID 添加了“!important”。

问题:如何防止网站的 CSS 干扰工具提示的样式？

Answer 1

您可以做的一件事是为您的工具提示容器使用 id。

您只需要记住 id 必须是唯一的。所以你的页面上不能有两个工具提示。

<div id="my-tooltip-2986234">
    the content of the tooltip
</div>

然后为您的 css 文件创建如下内容:

#my-tooltip-2986234 * {
     /*reset all style properties here (you can take this of a css reset script)*/
}

因为 id 比没有 id 的规则具有更高的权重 这应该会覆盖工具提示容器内外部页面的所有样式.

您还需要在工具提示的所有规则前加上该 id。

#my-tooltip-2986234 a {
     /*style for your a*/
}

您确实仍然可能遇到外国站点的 !important 规则的问题。但是以这种方式创建样式代码可以最大程度地减少冲突。您仍然可以考虑将 !important 规则添加到您的规则中。但至少对于我创建的东西，在规则前加上一个 id 就足够了。

另一种解决方案 - 但不像上面的那样优雅 - 是创建一个 iframe 容器，您可以在其中写入内容。这样你就可以对你的 css 规则进行完整的沙盒处理。但是因为我很长时间没有使用 iframe 我现在不知道各种浏览器的陷阱在哪里(你需要创建一个 iframe 没有src，因为跨域策略，过去在某些浏览器中会导致问题)。