由于万恶的IE6和IE7，我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器中可实现的效果在IE里却有各种离奇问题，例如IE6、IE7不能良好应对的inline-block和.clearfix问题，好在大部分问题已经有了足够的总结和途径。废话不多说，下面是一些方法区分浏览器的方法和我的看法。
主要途径
CSS Hack
直接在CSS文件中写CSS Hack是非常直观的区分方法。区分不同IE版本的hack代码为
#content{
background:red; /* 所有浏览器 */
background:orange\9; /* 所有IE浏览器 */
*background:yellow; /* IE7和IE6 */
+background:green; /* IE7 */
_background:blue; /* IE6 */
}
还有一些hack不太实用，就不一一列举了。
CSS Hack的缺点是CSS文件无法通过W3C验证，代码阅读时会很奇怪。
条件注释CSS文件
条件注释是写在html里的只会被IE识别的代码，一般在<head>区域通过不同的条件注释导入不同的CSS，不同的IE浏览器会引用不同的CSS。下面的4段注释依次表示"在IE下使用"、“低于IE8时使用”、“IE7时使用”、“IE6时使用”：
<!--[if IE]>
<link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="/ie.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/ie7.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" />
<![endif]-->
由于IE8下CSS问题较少，一般只需要为IE6、7写一点修正代码。如果需要，可以在ie.css里用CSS Hack对IE6/7进行差异处理。
<!--[if lt IE 8]>
<link rel="stylesheet" href="/ie.css" type="text/css" media="screen" />
<![endif]-->
条件注释CSS文件的缺点是会增加至少1次http请求，影响渲染速度，而且维护时不够方便。
条件注释<html>
条件注释<html>跟上面的方法原理一样，只不过这里是给<html>注释不同的class。
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
这样在CSS中使用下面的代码即可区分版本
#content{background:red;}
.ie9 #content{background:orange;}
.ie8 #content{background:yellow;}
.ie7 #content{background:green;}
.ie6 #content{background:blue;}
你也可以增加诸如.ltie8这样的class来实现更方便的版本分组管理。这个方法不会增加http请求，而且不需要任何hack。
最佳方法
毫无疑问，最好的办法就是用条件注释<html>为CSS提供区分。所有CSS文件可以合并在一起，ie的fix代码与正常规则临近，便于维护，而且没有hack可以让代码符合标准（使用zoom、私有CSS3属性依旧无法通过验证T_T）。
标准浏览器：本文指IE9、Chrome、Safari、Firefox及Opera等支持CSS标准属性的浏览器。
分享到：
相关推荐
为了兼容性，开发者必须使用其他方式来区分IE的不同版本。通过 \9 后缀，开发者可以为IE6到IE10版本的浏览器指定特定的样式规则，同时为其他浏览器设置标准的CSS样式。 #### 3. IE6/7/8/9/10都支持的CSS Hack - \9...
2. IE8 以下版本的浏览器中的盒模型 块级元素与行内元素方面： 1. 怎么用 CSS 控制它们 2. 怎么合理地使用它们 浮动元素方面： 1. 怎么使用它们 2. 它们有什么问题 3. 怎么解决这些问题 HTML 与 XHTML 方面： ...
1. 盒模型：外边距、内边距和边框之间的关系，及 IE8 以下版本的浏览器中的盒模型。 2. 浮动元素的使用和解决问题：浮动元素可以使用 float 属性实现，解决问题可以使用 clear 属性。 3. 块级元素与行内元素的控制：...
6. **浏览器兼容性**：考虑不同浏览器的渲染差异，如Firefox支持`moz-border-radius`实现圆角，但IE可能需要特殊处理。可以使用CSS3渐进增强技术，确保基本样式在所有浏览器中可用，而高级效果仅在支持的浏览器中...
- PNG24位图像在IE6中的显示问题可以通过转换为PNG8格式解决。 - 默认的`margin`和`padding`差异可以通过重置CSS来统一。 - IE6的双边距BUG可以通过特定的CSS技巧来修复，例如使用负`margin`来抵消多余的间距。
- 在使用 `isPlainObject` 方法时，需要注意不同浏览器的差异，比如 IE 浏览器可能需要额外的检查来确保兼容性。 #### 9. DOM 节点和窗口对象的特殊性 - 在 `isPlainObject` 方法的检测中，对 DOM 节点和窗口对象的...
- **浏览器内核差异**：不同的浏览器使用的内核不一样，比如Chrome用Blink，Firefox用Gecko，IE用Trident，Safari用Webkit，了解这些差异有助于进行兼容性开发。 - **兼容性**：涉及到不同浏览器间对标准支持的差异...
5. jQuery 2.0：这个版本移除了对IE6/7/8的兼容性支持，专注于现代浏览器，体积更小，速度更快。但因为失去了对旧版IE的支持，实际应用中并不普遍。 6. jQuery 3.x：此版本开始，jQuery进一步优化了性能，并保持向...
2. 浏览器内核差异：现代浏览器的内核主要有Trident（IE）、Gecko（Firefox）、Blink（Chrome、Opera）、WebKit（Safari）。了解各浏览器内核间的差异有助于我们在跨浏览器开发时采取相应的兼容性策略。 3. 兼容性...
在我所了解到的编辑器中，兼容性最好的是百度编辑器，它依赖 jquery，又对常见的 DOM 操作进行了封装，为了兼容 IE，对 Range 也做了封装。加上代码高亮插件、脏代码过滤、Office 过滤、多语言等等，导致代码非常的...
-修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer，用来定时发起AJAX请求。 +2009-09-06 v2.1.0 -Button的Pressed属性值能够正确的反映客户端的变化。 -优化...
-修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer，用来定时发起AJAX请求。 +2009-09-06 v2.1.0 -Button的Pressed属性值能够正确的反映客户端的变化。 -优化...
首先想到的方法是给tr设置relative，用ie6/7测试以下代码： Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ; left:100px...