如何停止注入HTML-div / CSS继承样式？ （IE浏览器） [英] How to stop Injected HTML-div / CSS from inheriting styles ? (Internet Explorer)

问题描述

我正在为Internet Explorer创建一个扩展，其中我在网页上注入CSS样式的span标签。如果此组件的特定部分被点击，将显示一个弹出窗口。

I am creating a extension for Internet Explorer where I am injecting CSS-styled span tags on webpages. If a specific part of this component is clicked on, a popup is shown.

这个弹出框实际上是一个DIV元素，我注入到最后的内容页：sBODY-tag。我在这个div里面有一个CSS样式表，根据我在哪个网站，这个弹出窗口的外观是根据规格（关于宽度，等等），或者不是。

This popup is in reality a "DIV"-element that I am injecting at the very end of the content page:s "BODY"-tag. I have a CSS-styled table inside this div, and depending on which site I am on, the appearance of this popup is either according to specification (in regards to width, and so on), or not.

我没有太多的知识，当谈到CSS等等，但可以这是因为父页已经有一些CSS为BODY DIV或TABLE - 正在被我的元素继承的元素？

I don't have that much knowledge when it comes to CSS and such, but can this be because the "parent" page already has some CSS for "BODY", "DIV", or "TABLE"-elements that is being inherited by my elements?

如果是这种情况，是否有任何方法阻止这个？ >

If this is the case, is there any way of stopping this?

推荐答案

有至少两种方法做这个 ¹ ，但他们都有点凌乱

There are (at least) two means of doing this¹, but they're both a little messy.

使用带有自己的css的 iframe （这种方式页面被两个完全不同的web-页面）。

Use an iframe with its own css (this way the pages are separated by being two entirely different web-pages).

使用增加的特异性来定位插入的html元素。

Use increased specificity to target the inserted html elements.

body {
  /* targets the 'body', and these styles are inherited by its descendant elements */
}

body div {
  /* targets all divs that are contained within the 'body' element */
}

body > div {
  /* targets only divs that are directly contained within the body element */
  /* and these styles will/may be inherited by the children of these divs */
}

后一种方法的问题是，你必须明确指定几乎所有可能的排列。并且总是会有边缘情况没有考虑。您最好使用类名来指定新内容的样式：

The problem with this latter approach, is that you're having to explicitly specify almost all the possible permutations. And there will always be edge cases that aren't accounted for. You'd be best off using class-names to specify the styles for the new content:

.insertedDiv {
  /* this will apply to all elements of class 'insertedDiv', but may be overridden */
  /* by a more specific id-based selector such as '#container > .insertedDiv' */

---

---

1. 但我现在只能想到这两个。

这篇关于如何停止注入HTML-div / CSS继承样式？ （IE浏览器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！