css - 将所有内容设置为默认值的 CSS 重置

Question

我正在开发一个浏览器扩展，将它的 UI 添加到页面 DOM。在某些页面上，我遇到某些样式会影响我的 UI 的问题。为了解决这个问题，我将我的 UI 保留在一个公共根目录下，它将大多数样式重置为默认值。

有时我会错过导致 UI 出现视觉故障的东西。（即页面CSS文件集form { width: 80%; }，所以我需要添加form { width: auto; }到我的重置样式。

是否有一组样式将每个 CSS 属性重置为每个元素的标准声明为默认值的值？

score 3 · Accepted Answer

3

于 2013-10-23T13:21:50.683 回答

score 3 · Accepted Answer

我遇到了同样的问题。其他答案列出的常用 CSS 规范化器没有回答这个问题，因为它是为了消除浏览器默认样式之间的差异。

在扩展的上下文中，我需要取消随机网站上可能存在的每个特定样式。

我遇到了这个解决方案（我不确定在 7 年前提出问题时是否可行）。

.your-container-class,
.your-container-class *,
.your-container-class *::before,
.your-container-class *::after {
    all: initial;
}

到目前为止，它似乎通过消除网站之间的差异来实现目标。缺点是它甚至会重置一些默认样式（例如ol，不像列表那样）ul。li

score -1 · Accepted Answer

我建议使用快速的 Google 搜索来查找类似的内容：http: //meyerweb.com/eric/tools/css/reset/

您可以按原样实施重置，然后如果出现任何问题，只需根据需要添加即可。

请注意，一些预先制作的 CSS 重置需要大喊大叫才能使用它们。

score -1 · Accepted Answer

是的，一点没错。

对此有两种思想流派。一种是归零样式重置表，它基本上从 css 中删除所有边距、填充和其他此类设置。一个很好的例子是Eric Meyer 的 Reset CSS

另一种方法是将所有内容设置为您合理预期的大致内容，为段落和标题设置合理的边距，缩进列表等。Normalize.css 就是一个很好的例子

一些浏览器还支持该initial值，它将属性的值设置回它最初的值。它没有得到足够广泛的支持，无法在生产中使用，IMO。

score -2 · Accepted Answer

Html5 样板有一个 normalize.css ，它将所有的 css 样式设置为默认值。 http://html5boilerplate.com/

score -2 · Accepted Answer

当您将样式应用于具有不同独特样式的不同页面时，很难说您是否会通过一些 CSS 重置从所有页面中删除所有样式。

但也许这些可以帮助：

Normalize.css（被许多 CSS 框架使用）

6 回答 6