html - 清除部分页面的 Bootstrap 样式

Question

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

问题是，bootstrap 的样式正在渗入容器并“毒化”我的预览。我看到了两个解决方案:

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 保留其 Bootstrap 样式)。

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

• 是否有更全面、清晰的 CSS 解决方案？
• 试图清理 bootstrap 是一件傻事，我应该直接使用 iframe相反？

Answer 1

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

有太多潜在的问题和陷阱，从平衡重置的类优先级到任何 CSS 只会滚动遗留颜色/定位属性(这在电子邮件创作中仍然相关)这一事实。

iframe 集成到页面中是一件令人头疼的事情，但至少你知道它可以做到，而且一旦完成，它就保持完成状态。