0

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

工具提示使用<img>,<p>和<table>和。我的 PHP 文件用我在 CSS 文件中设置样式的 ID 回显这些元素。我的 CSS 在某些网站（如 Wikipedia）上正确显示，但其他网站却弄乱了填充/边距/对齐方式。例如，某些网站可能居中对齐，而我希望它左对齐。我已经在许多使用的 ID 中添加了“！important”。<tr><td><td>

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

4

1 回答 1

2

您可以做的一件事是将 aid用于您的工具提示容器。

你只需要记住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)*/
}

因为ida 具有更高的权重 ，所以没有idthis 的规则应该会覆盖工具提示容器内外部页面的所有样式。

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

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

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

另一种解决方案——但不如上面那个优雅——是创建一个iframe容器，您可以在其中写入内容。这样你就可以对你的 css 规则进行完整的沙盒化。但是因为iframe很久没用了，现在不知道各种浏览器的坑在哪里（需要创建一个iframe不带a的src，因为跨域策略，以前在一些浏览器中会导致问题） .

于 2013-10-14T06:58:09.540 回答