为页面的一部分清除引导样式

Question

我试图在我的一个页面上为html编辑器设置预览框。我制作了一个标准的<div id="preview"></div>样式容器，其中我偶尔会放弃我的html源代码，并且工作得很好。

问题是，引导程序的样式渗入容器并'中毒'我的预览。我看到了两个解决方案，这一点：

1. 移动预览到iframe
2. 应用某种清除/重置的CSS的地方，我主持预览

例如元素：

<div id="preview" class="clean-css"> 
</div> 

.clean-css { 
    div, p: { 
     border: 0; 
     margin: 0; 
    } 
    /* a bunch of reset css stuff here */ 
} 

我认为iframe笨重的解决方案和排序的最后一招。我宁愿把我的东西放在一个页面上。所以我开始研究各种复位CSS样式表。不幸的是，它们似乎大部分都是为了平衡浏览器之间的差异，并且不会将所有样式重置为裸值（例如，保留其引导样式）。

我可以继续搜索更好的reset-css样式表，或者我可以尝试填写样式表中的孔，我现在有。但在此之前，我想我应该问更多经验丰富的前端开发人员他们的经验是什么。

• 是否有一个更全面的清晰的CSS解决方案呢？
• 正试图清理引导一个傻瓜的差事，我应该去iframe而不是？

Answer 1

经过几个月试图重置CSS的工作，答案是：只需使用& $^* iframe。

从平衡重置的类优先级到任何CSS只会覆盖传统颜色/定位属性（这些属性在电子邮件创作中仍然相关）这一事实中，存在太多潜在问题和缺陷。

iframe对于整合到页面来说是一件头疼的事情，但至少你知道它可以完成，一旦完成，它就保持完成。