如何阻止注入的HTML-div / CSS继承样式？（Internet Explorer）

Question

我正在为Internet Explorer创建一个扩展程序，其中我在网页上注入了带有CSS样式的标签。如果单击此组件的特定部分，则会显示弹出窗口。

这个弹出窗口实际上是我在内容页面的“BODY”标签的末尾注入的“DIV”元素。这个div里面有一个CSS样式的表格，根据我所在的站点，这个弹出窗口的外观要么符合规格（关于宽度等），要么不符合。

我对CSS等方面并没有太多了解，但这可能是因为“父级”页面已经有一些CSS用于继承我的元素的“BODY”、“DIV”或“TABLE”元素吗？

如果是这种情况，有没有办法停止这种继承呢？

- nelshh

Answer 1

至少有两种方法可以做到这一点¹，但它们都有点混乱。

使用带有自己的CSS的iframe（这样页面通过成为两个完全不同的网页来分离）。

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

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 */
}

这种方法的问题在于你需要显式地指定几乎所有可能的排列组合。而且总有一些未被考虑到的边缘情况。最好使用类名来指定新内容的样式：

.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' */

但是我目前只能想到这两个。

- David Thomas

Answer 2

CSS天然地“层叠”，这意味着如果一个容器元素有属性，它的子元素默认情况下会继承它。当然，您可以通过重新定义样式来覆盖更具体的项目上的值。

您需要与HTML一起注入CSS，其中包含弹出窗口所需的所有必要属性。与大多数CSS不同的是，您不能假设任何默认值，您需要为div指定可能被页面覆盖的任何内容。确保在CSS中特别引用DIV ID，以确保您的样式覆盖页面的样式，并且不会无意中干扰页面的格式。

- Zack Bloom

---

使用div id覆盖类，剩下的要么是重置新div id内部的子元素的css，要么是在其上声明新样式。 - Tom

Answer 3

你应该从CSS重置样式表开始。但是它必须被修改，只影响你的HTML。因此，如果你将你的HTML包装在一个带有类似“23d4o829”的ID的div中，你可以编辑重置样式表中的每个规则，使其仅影响该div内的HTML。

例如，

html, body { /* some stuff */ }
table { /* more stuff */ }

变成

html #23d4o829, body #23d4o829 { /* some stuff */ }
#23d4o829 table { /* more stuff */ }

等等。之后，您可以拥有控制外观所需的所有css规则。

编辑：我认为像David Thomas提到的使用iFrames更好。

- aptwebapps

---

CSS重置样式表仅用于重置浏览器默认值，主机页面可能具有未重置的样式。 - Zack Bloom

实际上，我的解决方案可能并不完全适用于所有情况。它大部分时间都能正常工作，但如果现有页面的CSS规则中有一些非常特定的标识符（例如：body #foo div #bar { padding: 5px }），那么它可能无法重置。 - aptwebapps

@Zack Bloom，你对重置样式表的预期使用是正确的，但我认为它们在这里也可以使用。这不是一个完美的解决方案。使用iFrame是更可靠的方法。 - aptwebapps