Question

这不是一个新主题，但我很好奇每个人如何处理浏览器特定的.js或.css。

您是否拥有.js个if/else条件的功能，或者每个浏览器都有单独的文件？

现在每个流行浏览器的当前版本都是这个问题吗？

Answer 1

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

对于JavaScript，我建议使用一个已经完成大部分工作来抽象浏览器差异的库。 jQuery在这方面非常好。

Answer 2

不要写它们吗？

老实说，对于大多数布局来说，浏览器特定的CSS并不是必需的 - 如果是，请考虑更改布局。当下一个浏览器出现需要另一个变体时会发生什么？呸。如果您确实需要包含某些内容，并且它似乎无法在一个浏览器中运行，请在此处提出问题！有很多伟大的思想。

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

Answer 3

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。）

Answer 4

现在仍然存在一个问题，即CSS无法在所有浏览器中运行（主要是IE6 / 7）。

我从来没有需要一个单独的JS文件来处理我曾经做过的事情。如果您使用的是JS库（jQuery，YUI，Prototype等），将会处理99％的浏览器不兼容问题。

至于CSS，我更喜欢将我的浏览器特定修复程序粘贴在同一个CSS文件中。当您只需要在一个位置查找样式时，它可以更容易地进行调试。您可能需要花费数小时调试一些内容，才能发现该错误是由您的10行浏览器特定样式表引起的。

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

Answer 5

使用所谓的“feature detection”。

例如，如果您要使用document.getElementsByClassName，请执行以下操作：

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

至于CSS，如果你使用标准，你应该在很大程度上是好的，除了在IE中。在IE中，使用条件注释 - 它是方法recommended by the guys at Microsoft。

Answer 6

就我个人而言，我主要使用如上所述的条件评论。

在Stackoverflow播客中，Jeff表示Stackoverflow正在使用Yahoo's CSS Reset，这是我从未听说过的。如果它做了广告所做的事情似乎会解决许多（大多数？全部？）基于浏览器的CSS差异;至少在Stackoverflow html源代码中我没有看到任何指示条件注释的内容。我肯定会在我的下一个网络项目中使用它，并且很想听到任何人的经历。

至于Javascript;已经说过，使用你最喜欢的JS Framework ......

Answer 7

我使用框架来处理99％的xbrowser内容。

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

Answer 8

if / else和单独的文件，都取决于网站的复杂程度。

浏览器之间肯定仍然存在不兼容性，因此请考虑让JavaScript框架为您执行肮脏的工作......

的jQuery http://jquery.com/

道场 http://www.dojotoolkit.org/

Script.aculo.us http://script.aculo.us/

原型 http://prototypejs.org/

Answer 9

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

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

至于组织，这取决于您的申请。我认为将它放在初始化代码中，然后在需要的地方使用检测将是最好的。我仍有问题需要偶尔检测资源管理器。例如，在使用jQuery时，我发现在Explorer中，与Firefox相比，parent（）和next（）函数有时会有不同的含义。

Answer 10

Internet Explorer具有类似

的条件结构

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

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

Answer 11

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

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

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

当然，这个例子有点极端，但它确实让你在只使用一个CSS文件的情况下解决一些讨厌的浏览器不一致问题。

我还想到了使用CSS重置文件的想法，并且肯定使用像jQuery这样的库，而不是重新发明JavaScript事件和DOM差异。

Answer 12

我认为条件注释非常适合样式表，但它们也可以用于javascript / jquery。

由于.browser已被弃用，现在使用条件注释从jquery 1.9（？）中删除是一个非常好的方法来执行浏览器特定的JavaScript。

这是我的简单例子：

1 - 在页面的某处放置条件评论。我个人把它贴在身体标签后面。我已经看到人们在实际的身体或html上使用它，但这会带回IE8 / 9/10可比性视图按钮，如果可能的话你想避免这种情况。

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

2 - 然后使用jquery检查我们的IE特定容器是否存在。

if ($("div").hasClass("ie8-and-below")) {
        //do you JS for IE 8 and below only
    }

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

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

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

注意：截至本文发布之日，http-equiv并未验证W3C标准，但它是一个非常有用的标记，已被google和microsoft等主页采用。我认为这只是因为W3C在采用它方面有点落后。

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

12 个答案: