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

Question

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

小书签内容在当前页面 DOM 中，而不是在 iframe 中(因为我们需要 cookie 和访问 DOM)。

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

有没有办法可以将当前页面中的这个DIV区域完全隔离出来，只看我们想要的？

Answer 1

如何尝试用一些不太可能出现在他们的页面上的晦涩元素替换您的 div。

例如。 b 或 em 或 i 或者如果您不介意浏览器支持，甚至可能是较新的 html5 元素之一。

并将它们设置为 display: block 的样式，使其像 block 元素 div 一样工作。

生成的 HTML 不会有效或不美观，但它是一个书签，嗯。

除此之外，您还需要一个真正好的重置。

否则您将不得不忍受样式上的细微差别。