可移植 CSS 的规则是什么？答案

【问题标题】：What are the rules for portable CSS?可移植 CSS 的规则是什么？
【发布时间】：2011-10-28 18:01:35
【问题描述】：

我是 CSS 新手，要确保 CSS 在其他浏览器中看起来相同，应遵守哪些规则？（我使用火狐）。

附： IE7有什么具体规则吗？

【问题讨论】：

【解决方案1】：

你不能总是确定。

但是您可以使用 css 重置。所有浏览器的标准 css-settings 都将被重置，然后你就有了一个全新的开始。

【讨论】：

【解决方案2】：

在这个网站上，您拥有所有必要的信息，请研究 Peter-Paul Koch 的 http://www.quirksmode.org/ 并不要使用特定于浏览器的选择器，例如以 -moz- 或 -webkit- 为前缀的选择器

最后，不，不是很确定，很遗憾。测试、测试和更多测试是唯一的解决方案。

【讨论】：

【解决方案3】：

您在这里提出了一个相当广泛的问题，但需要遵循的一些指导原则是：

确保它是标准化的 CSS 和 HTML。如果它有 -moz-、-webkit- 或 -o-（或更多）供应商前缀，它的行为可能不会完全符合您的预期。
确保它通过验证！通过W3 validation service 来查看代码中的任何错误。
考虑使用 CSS 重置，例如 Eric Meyer reset。这会将所有元素重置为 0padding、margin 等。

或者使用像 HTML5 Boilerplate 这样的 Normalize（正如 Meo 指出的那样）。
了解如何使用 IE 的Conditional Comments。在大多数情况下，“真正的”浏览器（Chrome、Firefox、Opera）将呈现 HTML 应有的样子。由于有多个使用中的 IE 版本，您将不得不为每个版本提供不同的代码（不支持 IE6），这是最好的方法。

可能还有很多东西要添加，但最好的东西确实是经验。

祝你好运！

【讨论】：

【解决方案4】：

我认为最糟糕的起点是这里： http://html5boilerplate.com/（阅读评论的 CSS。）它规范了跨不同浏览器的 CSS 行为。（我不建议使用重置）。

请咨询http://na.isobar.com/standards/，了解最佳前端最佳实践。

有一些规则可以让你的东西在 IE 6 和 7 中工作（只有这些规则会给你带来严重的麻烦）：

如果在 IE6 / 7 中出现问题，请尝试设置缩放：1，然后再尝试其他任何操作
z-index 在旧 IE 上有点棘手
首先为 IE 制作网站，然后为其他浏览器 (CSS3) 做一些花哨的东西，这将为您省去很多麻烦
不要在 html 文件中插入超过 32 个 CSS 文件（不是开玩笑；）http://acidmartin.wordpress.com/2008/11/25/the-32-external-css-files-limitation-of-internet-explorer-and-more/）
请咨询http://www.quirksmode.org/，了解哪些工作在哪里发挥作用
尽量避免在您的 CSS 中使用 MS 过滤器...（会使您的网站呈现非常缓慢，并可能导致 JS 动画出现意外行为）

【讨论】：

【解决方案5】：

在 IE 9 之前，就 CSS 而言，IE 似乎从未遵循任何规则，但几乎所有其他浏览器都遵循这些 W3 标准：

理论上，如果你坚持这些，一切都应该有效，但实际上并非如此。不过，这肯定是朝着正确方向迈出的一步，其余的细节只是通过尝试、错误和经验来学习的。

【讨论】：

【解决方案6】：

这个网站会给你一个好的开始。

【讨论】：