我正在开发一个浏览器脚本,该脚本扫描页面以查找关键字,突出显示它们,当用户将鼠标悬停在它们上时 - 创建一个使用 AJAX 和 PHP 填充的工具提示。我遇到的唯一问题是显示工具提示的网站的 CSS 干扰了工具提示内容的 CSS。
工具提示使用<img>
、<p>
和<table>
<tr>
和<td>
。我的PHP文件用我在CSS文件中设置样式的ID回显这些元素。我的CSS在某些网站(如维基百科)上可以正确显示,但其他网站会弄乱填充/边距/对齐方式。例如,某些网站可能<td>
中心对齐,而我希望它左对齐。我已经在所使用的许多ID中添加了"!important"。
问:如何防止网站的 CSS 干扰工具提示的样式?
做的一件事是为工具提示容器使用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
,我现在不知道各种浏览器中的陷阱在哪里(您需要创建一个没有src
的iframe
,因为跨域策略,这曾经在某些浏览器中导致问题)。