防止注入的HTML使用网站的CSS

Question

I'm making a simple extension for FF and Chrome that will inject a <div> on the top of the page (right after <body> ). 我正在为FF和Chrome做一个简单的扩展，它将在页面顶部（紧随<body> ）注入 <div> 。 The problem is that some websites have global CSS rules for buttons or borders, etc. Eg: 问题是某些网站对按钮或边框等具有全局CSS规则。例如：

button, input[type="button"], input[type="submit"] { 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
}

I want the buttons (and other elements) inside my injected div to use only the CSS from their classes and nothing else. 我希望注入的div中的按钮（和其他元素）仅使用其类中的CSS，而不能使用其他任何东西。 Is it possible to make those elements reject "foreign" CSS ? 是否有可能使这些元素拒绝 “外国” CSS？

Thank you. 谢谢。

Answer 1

将其放在iframe中修复

Answer 2

Since you're injecting code into the DOM, that HTML is subject any CSS that applies to it. 由于您是将代码注入DOM，因此该HTML会受到适用于它的所有CSS的约束。

I would recommend simply overriding the CSS for your injected DIV by using a unique ID. 我建议您使用唯一的ID来为注入的DIV覆盖CSS。

HTML: HTML：

<div id="uniqueIdThatNobodyWouldUse">
    <input type="text" name="input" />
</div>

CSS: CSS：

#uniqueIdThatNobodyWouldUse input {
    color:#000; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 

}

And if you really want to be sure, you can apply !important to force and imposing CSS. 而且，如果您确实想确定，则可以应用!important强制和强加CSS。

#uniqueIdThatNobodyWouldUse input {
    color:#000 !important;
    font: bold 84% 'trebuchet ms',helvetica,sans-serif !important; 
    background-color:#fed !important; 
    border:1px solid !important;
    border-color: #696 #363 #363 #696 !important; 

}

防止注入的HTML使用网站的CSS

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-12-04 11:29:49

解决方案2
-1 2014-11-21 16:30:05

防止注入的HTML使用网站的CSS

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-12-04 11:29:49

解决方案2 -1 2014-11-21 16:30:05

解决方案1
0 已采纳 2014-12-04 11:29:49

解决方案2
-1 2014-11-21 16:30:05