我正在为 Internet Explorer 创建一个扩展，我在网页上注入 CSS 样式的 span 标签。如果单击此组件的特定部分，则会显示一个弹出窗口。
这个弹出窗口实际上是一个“DIV”元素，我在内容页面的最后注入了它：s“BODY”标签。我在这个 div 中有一个 CSS 样式的表格，根据我所在的站点，这个弹出窗口的外观要么符合规范（关于宽度等），要么不符合。
我对 CSS 等没有太多了解，但这可能是因为“父”页面已经有一些用于“BODY”、“DIV”或“TABLE”元素的 CSS被我的元素继承了？
如果是这种情况，有什么办法可以阻止这种情况？
【问题讨论】：
标签： html css internet-explorer
有（至少）两种方法可以做到这一点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' */
【讨论】：
CSS 自然地“级联”，这意味着如果容器元素具有属性，则默认情况下它的子元素会继承它。当然，您可以通过重新定义样式来覆盖更具体的项目的值。
您需要将 CSS 与指定弹出窗口所有必要属性的 HTML 一起注入。与大多数 CSS 不同，您不能假定任何默认值，您需要为您的 div 指定任何可能被页面覆盖的内容。确保您在 CSS 中通过 id 专门引用 div，以确保您的样式覆盖页面的样式，并且您不会无意中弄乱页面的格式。
【讨论】：
您应该以css reset stylesheet 开头。但必须对其进行修改以仅影响您的 html。因此，如果您将 html 包装在 id 为“23d4o829”之类的 div 中，您可以使用编辑重置样式表中的每个规则，这样它只会影响该 div 中的 html。
例如，
html, body { /* some stuff */ }
table { /* more stuff */ }
变成
html #23d4o829, body #23d4o829 { /* some stuff */ }
#23d4o829 table { /* more stuff */ }
等等。之后，您就可以拥有控制外观所需的所有css规则了。
编辑：我认为使用 David Thomas 提到的 iFrame 更好。
【讨论】：