清除页面部分的引导样式

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集成到页面中是一个令人头疼的问题，但至少你知道它可以做到，一旦完成，它就会保持完成。