清除页面一部分的引导样式 [英] Clear bootstrap styling for part of a page

问题描述

我正在尝试在我的其中一个页面上为html编辑器设置一个预览框.我制作了一个标准的< div id ="preview"></div> 样式容器，偶尔在其中放置html源代码，并且效果很好.

I'm trying to setup a preview box for an html editor on one of my pages. I made a standard <div id="preview"></div> style container, in which I occasionally drop my html source, and that works fine enough.

问题在于，引导程序的样式正在渗入容器并中毒"了我的预览.我看到了两种解决方案:

The problem is, bootstrap's styles are seeping into the container and 'poisoning' my preview. I see two solutions to this:

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 保持其引导样式).

I consider iframe a clunky solution and sort of a last resort. I'd much rather keep my stuff on one page. So I started looking into various reset css stylesheets. Unfortunately, it seems most of them are geared towards equalizing differences between browsers and don't reset all styles to their bare values (for example, blockquote keeps its bootstrap styling).

我可以继续搜索以获取更好的reset-css样式表，或者可以尝试填充现在的样式表中的空缺.但是在那之前，我想我应该问更多有经验的前端开发人员，他们对此有什么经验.

I can keep googling for a better reset-css stylsheet, or I can try to fill in the holes in the stylesheet I have now. But before that, I figured I should ask more experienced frontend devs what's their experience with this.

• 那里是否有更全面，清晰的CSS解决方案?
• 是否正在尝试清理傻瓜的事务，而我应该只使用 iframe ?

推荐答案

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

After a few months of trying to make reset CSS work, the answer is: just use the &$^* iframe.

从平衡重置的类优先级到任何CSS都将仅滚动旧的颜色/位置属性(在电子邮件创作中仍然有用)这一事实，存在太多潜在的问题和陷阱.

There are just too many potential problems and pitfalls, from balancing reset's class precedence to the fact that any CSS will just roll over legacy color / positioning attributes (which are still relevant in email authoring).

iframe 很难集成到页面中，但是至少您知道它可以完成，一旦完成，它就保持完成状态.

iframe is a headache to integrate into the page, but at least you know it can be done, and once it is done, it stays done.

这篇关于清除页面一部分的引导样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！