Javascript 如何将CSS规则写入不同的浏览器？

可能重复：

好吧，所以这个问题可能有点让人困惑。 我想用一种更简单的方式来表达，这样“你”就可以理解我的意思了 观点

所有浏览器都不同。每个浏览器都解释CSS规则 不同，这会导致不同的结果。有时效果不错 其他时候，结果往往完全出乎意料。IE的情况可能导致最坏的情况

很多时候，开发人员被迫检测浏览器以应用 特定的css样式！ 这可以通过javascript支持实现。不管怎样，有人说 这种方法不足以预防灾难。。。其他 我认为解决这个问题的最好办法是依靠 而不是目标检测

嗯，我不知道哪一个是最好的。。。 请随时根据示例给出您的意见。 一如既往，谢谢你

更新

---

IE的情况可以非常简单地处理条件声明，但safari不能以同样的方式处理！所以我留下这个链接：为了澄清我的观点…

对于单独选择IE，特别是IE7和IE6，你可以使用条件注释来加载IE特定的样式和/或样式表

---

大多数bug都有可行的解决方法。格式良好且符合标准的html/css应该在所有现代浏览器中正确显示。

可以帮助您解决Internet Explorer中的缺陷。

除了JavaScript之外，基本上有两种解决方案。你可以两者混合搭配

第一种解决方案是根据HTTP请求中的头确定用户的浏览器。（不同的平台将允许您以不同的方式执行此操作-例如，在ASP.NET中，请求对象包含此信息）。然后，您可以根据用户的浏览器提供不同的物理CSS文件

---

第二种方法是使用单个CSS文件，该文件包含不同浏览器的不同规则。使用各种特定于浏览器的技巧，将正确的规则应用于正确的浏览器。实际上，这意味着使用只有特定浏览器才能理解的CSS规则。关于这项技术的更多信息可以找到。

两件事。首先，确保包含DOCTYPE。如果不这样做，浏览器将默认为怪癖模式，并且它们对样式的解释将不同。通过这种方式，您可以最小化页面的不同CSS解释

其次，我要指出，IE（以我的经验来看，最大的冒犯者）支持条件注释，因此您可以包括特定IE版本的样式，如下所示：

<!--[if lt IE 8]>
<link rel="stylesheet" href="iehacks.css" type="text/css" />
<![endif]-->

所有浏览器都不同。每一个 浏览器解释CSS规则 不同的，驱动到不同的 结果。有时结果是错误的 其他时间和很多时候都很好 结果完全出乎意料。这个 IE的情况可能导致最坏的结果 可能的情况

您应该能够为所有浏览器提供完全相同的CSS（我在这里讨论），并获得一致的显示，除了IE6和IE7（这是因为它们有太多的bug）

对于这些浏览器，一种常见的做法是包含一个新的样式表，并使用特定的修复程序：

另一种情况是，您愿意使用仅在较新浏览器中可用的东西

在这些情况下，最好检测对您正在使用的闪亮新功能的支持

---

这样，您就可以为不支持该功能的浏览器提供一个合理的回退。

对于内联CSS，您可以进行特定的攻击，例如：

.myclass {
  height: 100px; /* all browsers */
  #height: 100px; /* MSIE browsers */
  _height: 100px; /* MSIE >= v6.0 */
}

或者，您可以在页面中使用注释样式条件，并包括可选的样式表：

<!--[if gt IE 5]>
<style type="text/css">
  .mystyle { height: 100px; }
</style>
<![endif]-->

---

实际上，所有当前的、现代的浏览器都基于标准对CSS进行非常相似的解释。通常只有IE（6、7、8）会产生问题，特别是当HTML文档没有触发标准模式时，因此：

使用DOCTYPE根据当前的HTML和CSS标准编写页面

为了支持旧版IE，请使用条件注释为它们提供单独的样式表

如果其他浏览器之间存在差异，通常会有变通方法。在这里或你最喜欢的CSS论坛/群组/列表中询问abotu特定问题

只有一个字：

---

您永远不应该根据用户的浏览器更改样式，而是根据浏览器的资源是否允许更改样式。

我个人不相信浏览器感知CSS。在我看来，这是浪费时间。它需要额外的时间来编码，额外的时间来更改，并造成额外的一层头痛。另外，你什么时候停下来？AOL浏览器？冰岛有12个人在使用15年的linux版本，这是一天中的一种随意的味道吗

我也不做黑客。有些人会通过Jquery的CSS或我合并的外部代码进入，但我并不亲自编写它们。它们无法验证，所以它们不应该出现在我的脑海中。Javascript技巧很好，但对于样式，我不依赖它们，因为它们不是100%可靠的。如果它不能很好地降解，那么它就不是一种选择

因此，为了解决这些问题，我做了以下工作：

干净、有效的CSS

重置（部分时间）

网格（通常通过或）

元素的航位推算。这意味着要避免100%像素完美的平面设计师心态，并针对网页经常出现的变化元素进行设计。暂时忘掉盒子模型吧，字体呈现方式也不一样，这一点永远不会改变

我避免像瘟疫这样的绝对因素。如果你尝试，99.5%的事情都可以相对完成

最前沿的…不是最前沿的。酷酷的新黑客很不错，但他们还不受支持。所以，这是我最后一个案例。对于我的大型（高薪）企业客户来说，必须是这样

智能设计。让我们面对现实吧，伙计们，如果你为网络设计，你将

<!--[if gt IE 5]>
<style type="text/css">
  .mystyle { height: 100px; }
</style>
<![endif]-->