如何在注入的HTML片段中防止CSS干扰？

Question

我目前正在开发一个Safari扩展,它使用注入的脚本进一步将一些HTML注入当前网页,并注入一些其他脚本以使其工作.这一切都运行正常,但问题是注入的HTML会受到网页已导入的CSS样式表的影响.例如,HTML在Google.com上看起来很完美(它具有相对较少的CSS样式),但在StackOverflow.com(样式按钮等)上却很糟糕.

在显示此HTML时,jQuery被注入到网页中,所以我可以使用它.我已经尝试了各种各样的事情,包括遍历所有元素并呼吁removeClass()他们每个人都无济于事.我也尝试添加"CSS重置"类等,但似乎没有任何工作.

什么是阻止CSS干扰我的HTML的最佳方法？

Answer 1

你不能阻止这种情况发生.但是,您可以覆盖CSS规则.给你的主元素一个唯一的id(通过obfustation真的应该是唯一的,比如"yourapplicationname_mainelement_name"或其他东西),然后覆盖所有可能对你的html产生奇怪效果的样式.

你的插件:

<div id="yourapplicationname_mainelement_name">
  <p>My paragraph that must not be styled</p>
</div>

你的css:

#yourapplicationname_mainelement_name p {
  display: block;
  color: black;
  background: white;
  position: relative;
  ... and so on ...
}

由于您的css样式规则是最具体的,根据您的ID,它们将覆盖注入html的页面上的任何设置.

进一步......可能很难看出哪些规则是最重要的.你可以使用firebug或类似的东西来理解哪一个覆盖了另一个.在开发应用程序时,你将很难没有它.