Javascript 如何处理特定于浏览器的.js和.css

这不是一个新话题，但我很好奇每个人是如何处理特定于浏览器的

.js

或

.css

的

您是否有

.js

函数中包含

if/else

条件，或者每个浏览器都有单独的文件

---

这些天来，每种流行浏览器的当前版本真的存在这个问题吗？

我使用一个框架来处理99%的xbrowser内容

---

对于框架中未涉及的所有内容，我将使用if/else或try/catch。

这是一个非常现实的问题。主要是因为IE6。您可以通过使用来处理IE6特定的CSS

对于JavaScript，我建议使用一个库，它已经完成了提取浏览器差异的大部分工作。jQuery在这方面真的很好。

不要写它们吗

诚然，对于大多数布局来说，浏览器专用CSS并不是必需的——如果是，请考虑改变布局。当下一个需要另一个变体的浏览器出现时会发生什么？讨厌。如果您确实需要包含某些内容，但在一个浏览器中似乎无法使用，请在此处提出问题！有很多伟大的人

---

对于JS，有几个框架负责实现跨浏览器行为，例如（在本网站上使用）。

现在CSS不能在所有浏览器（主要是IE6/7）中工作仍然是一个问题

我所做的任何事情都不需要单独的JS文件。如果您使用的是JS库（jQuery、YUI、Prototype等），99%的浏览器不兼容问题将得到解决

至于CSS，我更喜欢将特定于浏览器的补丁粘贴在同一个CSS文件中。当您只需在1个位置查找样式时，它使调试变得更加容易。您可能会花费数小时调试某些东西，结果发现错误是由10行特定于浏览器的样式表引起的

---

从性能角度来看，只有1个CSS和1个JS文件也更好

我使用jQuery的内置函数进行实际检测：

jQuery.each(jQuery.browser, function(i, val) {});

---

至于组织，这将取决于您的应用程序。我认为将其放入初始化代码中，然后在需要的地方使用检测将是最好的。我仍然有问题，有时我必须检测探险家。例如，当使用jQuery时，我发现parent（）和next（）函数有时在Explorer中的含义与Firefox不同

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

<>这将允许你为IE带来特定的样式表和JavaScript。如果没有符合标准的处理问题的方法，我认为这是最后的解决方案。

使用所谓的“”。 例如，如果要使用

document.getElementsByClassName

，请执行以下操作：

if(document.getElementsByClassName) {
    // do something with document.getElementsByClassName
} else {
    // find an alternative
}

---

至于CSS，除了在IE中，如果你使用标准，你应该在很大程度上是好的。在IE中，使用条件注释-这是一种方法。

无论是if/else还是单独的文件，都取决于网站的复杂性

<> P>浏览器之间仍然存在不兼容，所以考虑让JavaScript框架为你做肮脏的工作……/P> jQuery

道场

Script.aculo.us

原型

---

就个人而言，如上所述，我主要使用条件注释

不过，在Stackoverflow播客中，Jeff指出Stackoverflow正在使用，这是我从未听说过的。如果它做到了广告中宣传的那样，那么它似乎可以解决许多（大多数？所有？）基于浏览器的CSS差异；至少在Stackoverflow html源代码中，我没有看到任何指示条件注释的内容。我肯定会在我的下一个网络项目中使用它，我很想听听任何人使用它的经验

---

至于Javascript；正如已经说过的，使用你最喜欢的JS框架…

IE条件注释的缺点是需要额外的文件下载。我更喜欢使用两个著名的CSS过滤器：

.myClass {
  color: red;     // Non-IE browsers will use this one
  *color: blue;   // IE7 will see this one
  _color: green;  // IE6 and below will see this one
}

---

（是的，它不会验证，但上次我检查过，我们的钱来自用户和广告商，而不是W3C。）

如果您正在进行ASP.Net开发，您也可以使用（我今天刚刚在Stack Overflow上了解到这一点）

您可以在页面指令中使用它来链接不同的皮肤、母版页或CSS文件，但也可以在ASP.Net服务器上使用控件属性，如下所示：

<asp:Label runat="server" ID="labelText" 
   ie:CssClass="IeLabelClass" 
   mozilla:CssClass="FirefoxLabelClass" 
   CssClass="GenericLabelClass" /> 

当然，这个例子有点极端，但它确实允许您在仅使用单个CSS文件的情况下解决一些严重的浏览器不一致问题

---

我还支持使用CSS重置文件的想法，并明确使用类似jQuery的库，而不是在JavaScript事件和DOM差异上重新发明轮子。

我认为条件注释对于样式表非常有用，但它们也可以用于JavaScript/jQuery

由于.browser已被弃用，现在已从jQuery1.9（？）中删除，因此使用条件注释是执行特定于浏览器的javascript的一种非常好的方法

下面是我的快速示例：

1-在页面上的某个位置放置条件注释。我个人把它放在身体标签后面。我见过有人在实际的正文或html中使用它，但这会带来IE8/9/10可比性视图按钮，如果可能的话，您希望避免这种情况

<!--[if lt IE 9]><div class="ie8-and-below"></div><![endif]-->

3-（可选）设置您的目标可比性，并设置如下内容：

<meta http-equiv="X-UA-Compatible" content="IE=10" />

就在

标记之后。（这必须是开幕后的第一件事。 如果页面的其余部分正确编码，这将关闭ie10/9/8中的兼容性按钮。如果您有需要可比较模式的部分，这是一个很好的故障保护，如果在兼容模式下运行较新的浏览器，您可以通过其他方式触发JS

注：截至本文发布之日，http EQUID并未验证W3C标准，但它是一个非常有用的标签，已被

<meta http-equiv="X-UA-Compatible" content="IE=10" />