清除部分页面的引导样式

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 样式表。不幸的是，它们中的大多数似乎都旨在平衡浏览器之间的差异，并且不会将所有样式重置为其裸值（例如，blockquote 保持其引导样式）。

我可以继续搜索更好的 reset-css 样式表，或者我可以尝试填补我现在拥有的样式表中的漏洞。但在此之前，我想我应该问问更有经验的前端开发人员他们对此有何经验。

• 是否有更全面的清晰 css 解决方案？
• 试图清理引导程序是一件傻事，而我应该改用iframe 吗？

Answer 1

在尝试使重置 CSS 工作几个月后，答案是：只需使用 &$^* iframe。

有太多潜在的问题和陷阱，从平衡重置的类优先级到任何 CSS 都只会翻转旧的颜色/定位属性（在电子邮件创作中仍然相关）。

iframe整合到页面中是一件很头疼的事，但至少你知道它是可以做到的，而且一旦完成，它就一直在做。