问题标签 [css-reset]

这是我的 HTML 代码：

这是我的 CSS 文件代码 ( style.css)：

但背景颜色body不会改变。

没有 CSS 重置，它工作正常。你能建议我一个更好的 CSS 重置，或任何其他解决方案吗？

我想添加一些 css 以使<embed />标签看起来像<div>. 目前，它添加了任意高度和宽度，这通常会导致类似于 iframe 的滚动框。

有谁知道“嵌入重置”以使其表现得像一个 div？

编辑：真的，我只需要弄清楚如何根据内部内容获得高度。这是我到目前为止所拥有的：

谢谢，马特

例如，Meyer 重置有很长的元素列表¹我相信可以用*?

我已经看到了一些用途：

但是更多“高级”重置似乎与明确说明标签有关。

我在标签列表中没有看到（我认为）被 a 覆盖的*唯一元素是input、button和select- 事实上，Eric Meyer 重置似乎根本没有真正处理这些元素。如果避免重置这些元素是问题......你为什么不呢？浏览器显然不会都以相同的方式显示表单元素。

^{1 如果你很好奇。html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, I, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video}

我打算使用 Eric Meyer 的 CSS 重置，但我偶然发现了一些跨浏览器的差异（如input边距）。在此基础上，我想出了一个更激进的方法：

（这个已经过时了。别忘了在这个问题的最后检查当前的修订版本，并随意批评它）

它在所有经过测试的浏览器中都能正常运行：

• IE7
• IE8
• 铬（最新）
• 火狐（最新）
• 歌剧（最新）

问题是：有人看到这里有什么问题吗？我认为自己在 CSS 方面不太好，所以我不知道这是否会给我带来任何麻烦。

观察：此重置仅适用于跨浏览器问题。它应该（或必须！）遵循诸如input、a、等元素的通用规则code（例如：input“文本”类型将是不可见的，没有边框！）。稍后我将添加诸如通用a样式之类的东西。现在我正在重置东西，摆脱（几乎）所有在主要浏览器中不一样的东西。

到目前为止发现的问题

• 选择*器可能会导致性能问题。

• 具有某些规则的*选择器会以无法恢复的方式覆盖某些元素的默认样式。input例如： “提交”类型的默认样式。

• 令人惊讶的:before, :after { content: ''; }是，它破坏了 Firefox 中的选择元素。

• 在修订版中，我尝试设置margin: 0为所有输入元素。大多数浏览器在输入类型checkbox和radio.

经过修改的版本

结尾

好吧，我越是尝试改进我的重置，它看起来越像meyer 的 css 重置，所以我放弃了我的并采用了它。工作得很好：p

可能重复：
最好的 CSS 重置

实现 CSS 重置的最佳方法是什么？我的问题更多是在实现跨浏览器、跨平台兼容的布局的背景下。例如，在桌面浏览器（例如 ie、firefox 甚至 iPad 上，甚至在某种程度上在 iPhone 上），布局应该看起来相似。

请让我知道我是否应该应用 CSS 重置来实​​现这一点。

我有可以使用 Firefox 插件注入任何页面的元素。

自然，它和它的祖先会受到该页面上定义的 CSS 规则的影响。

我可以通过简单地明确每个属性来做到这一点，但即便如此，我的声明也可能被页面上更早的更具体的声明所覆盖。

如果不把不必要的特定选择器和 hanus 使用弄得一团糟，!important我怎么能在给定元素 ( div#my_root_container_element) 下重置所有元素的属性并确保我在此父元素下的声明适用。

使用 iFrame 是一种选择，但如果可能的话，我宁愿避免使用它——还有其他方法吗？给定应用程序，解决方案只需要在 Firefox 中运行。

谢谢。

我一直在研究一个小照片滑块。它在 Chrome 中看起来与在 FF 中略有不同，所以我认为 CSS 重置会使它们看起来相同。我用的是雅虎！YUI CSS 重置模型但没有任何改变。它在 FF 中看起来不错，但在 Chrome 中，右侧的“恢复”按钮太高了，大图片底部的一条细灰线在主按钮所在的位置被切断。这是网址：

http://www.replayground.com/slider/02.html

您可以忽略圆圈下方的内容。只是测试那里的东西。

这是我添加到 02.html 文件中的内容：

我真的很想得到关于如何让 CSS 重置正常工作的建议。不是如何解决您看到的特定按钮问题。当我向页面添加元素时，我不想每次都经历这个。

首先我想告诉你我为什么要问这个问题。我通常会更新写得不好且没有重置的项目。我想提高项目的质量，所以似乎应用 CSS 重置是绝对必要的。

我不想每次更改某些内容时都在每个浏览器中进行像素完美测试，也不想完全重写所有 CSS。

所以：

当我写作时：

我知道会发生什么麻烦：<p>会松动填充，<input>, <select>, etc. 会松动填充和边框。所以我必须手动指定它们。

这段代码比较难理解：

我对此完全感到困惑：

可以将 CSS 重置与 WebGL Three.js 库一起使用吗？它有什么影响吗？

我正在将现有应用程序从 Ext 3.x 更新到 4，并且我已经设法启用 Ext 的作用域重置 CSS 选项以防止 Ext 将其 CSS 重置应用于我的整个应用程序，但是我现在遇到了另一个问题。我的应用程序使用了很多硬编码的、非 ext 生成的 HTML 和 CSS 样式，其中大部分包含在 Ext 组件（面板、选项卡面板等）中。显然，由于这个 html 是 ext 组件的包含元素的后代，它继承了CSS 重置样式。结果，完全提升了非 Ext html 的自定义样式。

具体来说，有两个 CSS 规则会导致问题：

这个属性不是什么大问题，我所要做的就是创建我自己的重置包装类，将 box-sizing 改回“content-box”，并将该类应用于我的自定义 html 中最顶层的包装元素。该规则如下：

然而，另一个 CSS 规则并不那么容易否定：

这条规则如此麻烦的原因是我的自定义 HTML 中的所有不同元素都不会有相同的边距和填充，所以我不能像我为 box-sizing 所做的那样覆盖这些样式。这条规则优先于我的绝大多数自定义 CSS 样式的原因是因为它比 CSS 类本身具有更高的特异性。即“.x-reset div”选择器的边距/填充样式会覆盖“.my-cool-class { padding: 5px; margin:5px; }” for '' 之类的规则。

为了克服这个问题，我自然可以更新我的自定义 css 以通过在类选择器前面加上它所针对的元素类型（“div.my-cool-class”）或通过在规则前面加上 .x- 来赋予规则更高的特异性reset (".x-reset .my-cool-class")，但是这些选项中的任何一个都需要手动更新大量已经存在的自定义 css，更不用说增加文件大小和限制CSS 类。

那么有什么方法可以通过 Ext 的设置，或者通过其他一些我只是忽略的 CSS 解决方案，可以优雅地解决这个问题，并且希望没有太多的开销？