Question

我们正在开发一个书签，当书签加载到不同的网站上时，例如：cnn.com，bbc.co.uk，yahoo.com，它会以各种风格显示，我们很难重置这些样式。

小书签内容位于当前页面DOM中，而不是iframe中（因为我们需要cookie并访问DOM）。

我们尝试使用CSS重置，但这只重置了一些基本的东西，比如边距。例如，有一个自定义表单的页面，或者它继承的圆形表矩形，它不应该。

有没有办法让我们可以完全隔离当前页面中的DIV区域，只显示我们想要的内容？

Answer 1

如何尝试用一些不太可能出现在他们页面上的模糊元素来替换你的div。

例如。 b或em或i，或者如果您对浏览器支持不感兴趣，甚至可能是其中一个较新的html5元素。

将它们设置为display: block，使其像div一样运作，这是一个块元素。

你的结果HTML不会有效或漂亮，但它是一个书签，所以，嗯。

除此之外，你需要一个非常好的重置。

或者你只需要在造型方面略有不同。

Answer 2

我们最终使用https://github.com/premasagar/cleanslate

CleanSlate是一个极端的CSS重置样式表。它用于将HTML元素及其所有子元素的样式重置为默认CSS值。它完全由！important规则组成，它们会覆盖所有其他类型的规则。

Answer 3

好吧，你可以使用唯一的id，然后在每个属性中添加！important - 用于重置DOM中生成的元素 - 或者你可以在“HTML5”中使用新的scoped属性。

但是这可能会导致该元素或父母的所有显式“继承”值样式出现问题。例如，相对字体大小也会导致问题。

因此是样式部分的实验范围属性，但上次我尝试过只有Chrome / Chromium支持它，Firefox最近也可能获得了对它的支持 - 因为在邮件列表上进行了大量讨论。 / p>

http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped

编辑：

另一种解决方案可能是使用默认情况下不在DOM中的自定义元素。像document.createElement（“thisisfrommyapp”）; 您可以像其他元素一样设置样式，但必须应用display：block或者他们想要的任何行为。

此外，IE允许使用它们，但实际上您需要先将它们插入Trident的解析器中。如果要在HTML中使用它们，则必须在解析DOM之前执行createElement（）（因此它很可能位于文档的头部）。

<html>
<head><script>document.createElement('customelement');</script></head>
<body><customelement>is stylable in IE8, too</customelement></body>
</html>

你必须只为Trident做createElement的东西，因为否则你会因为它们的显示而产生奇怪的解析行为：inline-block默认模型：）

如果您在网站上使用XHTML是出于任何愚蠢的原因（没有正当理由在HTML上使用XHTML，因为解析器无论如何都要剥离XML标记），您应该使用自定义命名空间。

〜干杯

Answer 4

按照以下两个步骤对容器进行沙箱化。

<div class="namespace-box">
    <h1 class="namespace-title">Title</h1>
    <p class="namespace-text">Text</p>
</div>

取消设置容器名称空间的所有属性，all: unset;只是一个占位符：

[class*="namespace-"],
[class*="namespace-"]:after,
[class*="namespace-"]:before,
[class*="namespace-"]:hover:after,
[class*="namespace-"]:hover:before {
    all: unset;
    // properties to be unset
}

使用Grunt或Gulp任务将属性选择器添加到原始CSS。这会增加级联并防止未设置的黑客覆盖：

[class*="namespace-"].namespace-box,
[class*="namespace-"].namespace-title,
[class*="namespace-"].namespace-text {
    // original properties
}

您可以使用postcss-increase-specificity任务自动执行规范。

享受防弹容器。

如何CSS沙盒/重置当前页面中的整个DIV区域？

4 个答案: