1

我正在尝试在我的一个页面上为 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代替吗？
4

1 回答 1

2

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

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

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

于 2014-06-09T07:30:12.757 回答