HTML css兼容
说起HTML中CSS的兼容，这是我一直很头疼的一个问题。
第一，我不是做美工/UI的；第二，现在做开发，CSS/JS兼容也不可忽视。
曾经也想把这个弄懂，但是刚入门的时候就了解到，不同的浏览器支持的css,js都是不一样的，要考虑兼容；哪怕是单独一个浏览器版本不一样，出来的效果也是不一样的。。。
我头晕了。。。荒废至今，觉得还是有必要把它理清。所以，以一个开发者的身份，开始学习CSS/JS(以前稍懂点，但是不专业)
首先，大致的把这些浏览器分下类，IE是最为特殊的，其余如Firefox，Chrome，Safari这些基本都是差不多的。而且IE的6,7,8相差都比较大，特别是IE6和其它版本，更是夸张。
以下面代码示例：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>CSS Hacks</title>
<style type="text/css">
li {
background-color: green;
font-size: 1.5em;
font-weight: bold;
color: white;
line-height: 2em;
}
li.ie9 {
background-color: blue;
}
li.ie8 {
background-color: purple;
}
li.ie7 {
background-color: orange;
}
li.ie6 {
background-color: red;
}
div {
width: 500px;
height: 500px;
background-color: green;
background-color: purple\9;
*background-color: orange;
_background-color: red;
}
</style>
</head>
<body id="body">
<ol>
<li>Major browsers</li>
<li class="ie9">IE 9</li>
<li class="ie8">IE 8</li>
<li class="ie7">IE 7</li>
<li class="ie6">IE 6</li>
</ol>
<div id="demo"></div>
</body>
</html>
上面的代码，在主流浏览器中(FireFox,Chrome,Safari)，div的背景色是green；但是在IE9/IE8中，div的颜色是purple；在IE7中，div的颜色是orange；在IE6中，div的颜色是red。
同样的代码，为什么会显示出不一样的东西呢？这就要从浏览器对CSS的支持上入手了。
上面代码中，div的颜色是由
div {
width: 500px;
height: 500px;
background-color: green;
background-color: purple\9;
*background-color: orange;
_background-color: red;
}
这段CSS决定的。首先，宽和高我们不管，第一个出现的颜色是background-color: green;这是所有浏览器都接受的，如果没有下面的部分，所有的浏览器里div的颜色都是green，这时候问题出来了，后面对相同的属性进行重新渲染，background-color: purple\9;与下面相同，这三段CSS都是带有“特殊”标记的。
\9是只有在IE9/IE8里面才会有效渲染的代码，所以我们在IE9/IE8中看到的是紫色的；
*是包括IE7以下的浏览器可以渲染执行的。如果没有下面这段CSS，那么在IE7/IE6里面看到就会是橘黄色的；
_是只有在IE6里面才会渲染执行的。所以，在IE6下，把前面的green，orange重新渲染成了red color。
上面的代码，可以在不同的浏览器中让div显示出不同的颜色。但是，这样的写法并不符合W3C的标准。\9，*，_这三个特殊标记，是不被允许的。我们需要更加良好的方式来达到同样的效果。
众所周知，<link rel="stylesheet" type="text/css" href="css.css" >这段代码是引入外部引用的CSS，<!--，-->这两个标签在HTML中是表示注释内容的。但是，依然是IE浏览器的“特殊”，让这两个注释标签跟CSS结合起来，用更好的方法实现上面的效果。
Code：
<!--[if !IE]><!-->
<style type="text/css">
div {
background-color: gray;
}
</style>
<!--<![endif]-->
<!--[if IE 9]>
<style type="text/css">
div {
background-color: blue;
}
</style>
<![endif]-->
<!--[if IE 8]>
<style type="text/css">
div {
background-color: purple;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
div {
background-color: orange;
}
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">
div {
background-color: red;
}
</style>
<![endif]-->
在主流浏览器中，<!--，与-->标签之间的内容是完全作为注释的，
<!--[if !IE]><!-->
<style type="text/css">
div {
background-color: gray;
}
</style>
<!--<![endif]-->
<!--[if !IE]><!-->在非IE浏览器中是直接被作为注释的，<!--<![endif]-->也是作为注释的，中间内容可以正常执行。但在IE中，这两部分都是可以解释的，所以回执行判断，if的条件为false，就会直接找到endif结束部分，里面的内容不再被执行。
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="IE6.css" > <![endif]-->
在这段代码中，<!--开始，一直到-->在主流浏览器中都是作为注释内容的。但在IE中，就会进行判断是否要执行内部code。在IE6下就能加入针对性的css改动，对其他的浏览器则不会造成任何影响。
如上面的第二种方法，即达到了我们自己的目的，而且也符合W3C标准，是我们布局CSS的首选。
<!DOCTYPE html>是HTML5中唯一的doctype，也被视作将网页“升级”到HTML5的第一步。
很多国外网站的<!DOCTYPE html>和<HEAD>之间都会有一段注释,如:
<!—[if IE 6 ]><html class=“ie ielt9 ielt8 ielt7 ie6” lang=“en-US”><![endif]—>
<!—[if IE 7 ]><html class=“ie ielt9 ielt8 ie7” lang=“en-US”><![endif]—>
<!—[if IE 8 ]><html class=“ie ielt9 ie8” lang=“en-US”><![endif]—>
<!—[if IE 9 ]><html class=“ie ie9” lang=“en-US”><![endif]—>
<!—[if (gt IE 9)|!(IE)]><!—><html lang=“en-US”><!—<![endif]—>
作用于css。来写一些针对IE各版本的样式差异
先判断用户用的哪个IE版本，然后在 标签上加上该版本的class，这样可以方便hack
css文件是这样写的。
.ie6 xxx {};
.ie7 xxx {};
这是目前最好的hack方式之一。
