清除部分頁面的引導樣式

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很難集成到頁面中，但是至少您知道它可以完成，一旦完成，它就保持完成狀態。