【CSS】用于区分浏览器的资料及推荐做法（JS）

由于浏览器对 CSS 标准各种属性解释的不尽相同（其主要体现在微软的 IE6 及其他一些旧版本浏览器）我们需要在引入 CSS 文件时采用 IE 独有的条件注释（如 [if IE] [endif] 等）或是在 CSS 中避免使用容易混淆的属性（如同时存在左浮动及左边界等）当然目前用的比较多的仍然是后面将要提供的 CSS Hack 资料，但我个人则推荐最后面提供的 JavaScript 方法来处理：

常用的 CSS Hack 符号：

首先是一些最基本的参考资料，即在 CSS 样式表中：

1、微软 IE6 （Trident IV）可以识别“ * ”及“ _ ”号；

2、微软 IE7 （Trident V）可以识别“ * ”但不识别“ _ ”号；

3、火狐 FF3 （Gecko） Safari（WebKit）等标准浏览器对于“ * ”及“ _ ”都不能识别；

通常掌握以上的这几个区别就可以解决目前使用这些主流排版引擎及其衍生浏览器，由于其后的 IE8 在页面呈现上已经符合 W3C 的标准，所以基本上也就无需 Hack 了。但提供这些资料并非意味这是我们最好的选择，随着浏览器的更新及版本升级 CSS Hack 越来越不值得信赖而变得出现各种非预期效果及错误，所以如非必要尽量不要在你的项目中使用 CSS Hack 的方法。

我个人的推荐做法：

我个人比较推荐的做法是使用 IE 独有的条件注释包裹 CSS 引入语句 link 或 body 标签，或者使用 JavaScript 为页面 body 或 html 标签添加额外的 class 然后在 CSS 文件中使用对应的子选择器解决例如：

1、直接在引入 CSS 文件时用条件注释：



2、或是用条件注释给 html body 等标签添加额外的 class 属性：





     ... ... ... ...


3、又或纯 JavaScript 的方法：



4、或者是下面的几段超短代码区分 IE 与非 IE 浏览器：

var ie = !-[1,];
var ie = !+"\v1";
var ie = "\v"=="v";
var ie = 0/*@cc_on+1@*/;

// 挑战这些代码的简直都是天才！ ^_^

使用 JavaScript 的话可以偷懒使用 windows.XMLHttpRequest 这个方法来判断，因为高版本的 IE 或其他标准浏览器都已支持该方法，为什麽说是偷懒，因为这种方法并不准确。如果是仅区分 IE 核心和其他浏览器可使用 window.ActiveXObject 方法，该方法只有 IE 及其内核的浏览器支持。

如果你恰好在使用 jQuery 可以借助 jQuery.browser.version 方法为 body 标签添加一个包含浏览器版本的 class 或 id 以辅助 CSS 调整浏览器兼容性，而 ExtCore 默认就已经为 body 标签添加了浏览器核心及版本信息。

然后就可以使用诸如 body.ie6 或者 html.ie6 之类选择器的子选择器来定义特殊 CSS 样式了。当然有人会考虑那些禁用 JavaScript 的用户，我相信那些用户本身已经是高手了，这里我们打算暂且忽略了。 ^_^