清除部分页面的引导样式

时间:2014-04-04 12:29:47

标签: html css twitter-bootstrap frontend css-reset

我正在尝试在我的某个页面上为html编辑器设置预览框。我制作了一个标准的<div id="preview"></div>样式容器,我偶尔会删除我的html源代码,这样就可以了。

问题是,bootstrap的样式渗透到容器中并“中毒”我的预览。我看到两个解决方案:

  1. 将预览移至iframe
  2. 将某种清除/重置css应用于我承载预览的元素
  3. 例如:

    <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代替吗?

1 个答案:

答案 0 :(得分:1)

尝试重置CSS工作几个月后,答案是:只需使用&amp; $ ^ * iframe。

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

iframe很难集成到页面中,但至少你知道它可以完成,一旦完成,它就会完成。