清除部分页面的引导样式

2022-01-19 00:00:00 frontend html css twitter-bootstrap css-reset

我正在尝试在我的一个页面上为 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.

相关文章