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 a的权重较高，因此没有id的规则会覆盖工具提示容器内的所有外国网页样式。

您还需要为工具提示添加id的所有规则前缀。

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

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

另一个解决方案 - 但不如上面的优雅 - 是创建一个iframe容器，您可以在其中编写内容。这样你就可以完成你的css规则的沙盒了。但是因为我很长时间没有使用iframe我现在不知道各种浏览器中存在的缺陷（你需要创建一个没有iframe的{{1}}，因为跨域策略，曾经导致某些浏览器出现问题。）

保持网站CSS不干扰工具提示CSS？

1 个答案: