浏览器兼容性的那些事儿
你对各浏览器兼容性解决方案是否了解，所有的网页制作者都希望自己做出的网页可以完美的兼容所有主流的浏览器，包括IE6，IE7，IE8，Firefox，Opera，Safari，Chrome等等！但是有时候这是不可能实现的，在这里和大家一起共享下浏览器兼容性方面的知识。
一、浏览器兼容性介绍
现代Web设计与开发已经不简单的是设计问题，浏览器兼容性问题也成了Web开发者不容忽视的一个问题，随着IE浏览器每个新版本的推出，都在CSS的标准化方面前进一大步，同时，也就不可避免地在IE的各个主要版本之间产生兼容问题，关于CSS对IE的兼容问题一直是DIV+CSS的一个大问题，因为不同浏览器识别代码产生的效果是不同的，所以造成了很多浏览器对相同的CSS，产生不同的效果，这样就产生了网站的错位，导致了不同浏览器之间的不兼容。
关于浏览器兼容性的这种错位不仅表现在IE上，现在市场上的浏览器种类越来越多，比较常见的有IE系列的浏览器，我们从浏览器排行榜上面也看到其他浏览器如FF，Chrome等等也占据很多的市场份额，这些也可以说都是用户比较常用的浏览器，但是正因为各种浏览器的出现，为了更好的兼容各个版本的浏览器，我们就需要学习如何来处理IE的兼容问题。从而网络上出现了很多所谓的HACK，其实也就是针对各个浏览器的特点，来对各种浏览器的不同嗜好，产生的不同效果，实现的一种兼容各个版本浏览器的效果。
所以，兼容性对于网页设计师来说非常重要。
二、浏览器兼容性问题
当网页在不同浏览器之间显示时，由于不同浏览器支持的CSS标准不同，可能会遇到以下问题：
1、网页布局不整齐；
2、文本或图像重叠；
3、JavaScript功能有问题或错误；
三、浏览器兼容性解决方案
以IE浏览器为例，由于从IE6.0开始为了适应各个版本，就自身有了一个兼容性，所以我们可以指定给网页一个兼容特性；
例如：
网页在IE7下无错位，但在IE6和IE8下有错位，那么我们就可以指定当用户使用IE6和IE8的时候直接指定给IE6和IE8采用IE7的兼容模式来实现网页的不错位。但是这样一来，网页的兼容特性只是实现了IE6，IE7，IE8的一个兼容，但是为了同时兼容FF，我们这个时候就需要使用HACK来达到兼容FF的效果。
这样我们使用IE自身的特性和HACK之间的特性就达到了网页的兼容效果，这样实现兼容效果是最简单最方便的。这样我们其实就是对一种IE浏览器和FF之间的HACK在起作用，相对的写了很少的代码，也很实用和方便。
根据上面的这个例子，我们不难看出，在各大主流浏览器之间，解决浏览器兼容性的方案有以下两种：IE文件兼容方案、Css HACK方案；
1、IE文件兼容方案
IE文件兼容方案是微软针对IE系列浏览器推出的终极解决方案，下面以IE8为例，对该解决方案进行详细介绍：
为了帮助确保你的网页在所有未来版本的IE浏览器中都有一致的外观，IE8引入了IE8文件兼容性。在IE6中引入一个增设的兼容性模式，IE8文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。
了解IE8文件兼容性的必要性
每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色，其中一个风险就是旧版本网站无法正确的显示。为了将这个风险降到最低，IE6允许网页开发人员选择IE编译和显示他们网页的方式。"Quirksmode"为预设，这会使页面以旧版本浏览器的视点显示，"Standardsmode"(也称为"strictmode")特点是支持业界标准最为完善。然而要利用这个增强的支持功能，网页必须包含恰当的<!DOCTYPE>指令。
◆若一个网页没有包含<!DOCTYPE>指令，IE6会将它以quirksmode显示。若网页包含有效的<!DOCTYPE>指令但浏览器无法辨识，IE6会将它以IE6standardsmode显示。因为少数网站已经包含<!DOCTYPE>指令，兼容性模式的切换相当成功。这使网页开发人员能选择将他们的网页转移为standardsmode的最佳时机。
随著时间经过，更多网站开始使用standardsmode。它们也开始使用IE6的特性和功能来检测IE。举例来说，IE6不支持universalselector(即css之全局选择器*{})，一些网站便使用它来针对IE做特定的对应。
当IE7增加了对全域选择器的支持，那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的特定对应无法应用于IE7，造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式，受到影响的网站拥有者被迫更新他们的网站使其能支持IE7。
◆IE8比之前的任何版本浏览器都更支持业界标准，因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮助减轻所有问题，IE8引入IE8文件兼容性的概念，使你能选择你的网页设计要对应的特定IE版本。IE8文件兼容性在IE8增加了一些新的模式，这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在ie8正确的显示，你可以更新你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器编译你的页面。
这能让你选择将你的网站更新支持IE8新特点的时机。
认识IE8文件兼容性模式
IE8支持几种IE8文件兼容性模式，它们具有不同的特性并影响内容显示的方式。
1. EmulateIE8mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standardsmode指令会显示成IE8Standardsmode而quirksmode会显示成IE5mode。不同于IE8mode，EmulateIE8mode重设<!DOCTYPE>指令。
2. EmulateIE7mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standardsmode指令会显示成IE7Standardsmode而quirksmode会显示成IE5mode。不同于IE7mode，EmulateIE7mode重设<!DOCTYPE>指令。对于许多网页来说这是最推荐的兼容性模式。
3. IE5mode编译内容如同IE7的quirksmode之显示状况，和IE5中显示的非常类似。
4. IE7mode编译内容如同IE7的standardsmode之显示状况，无论网页是否含有<!DOCTYPE>指令。
5. IE8mode提供对业界标准的最高支持，包含W3CCascadingStyleSheetsLevel2.1Specification和W3CSelectorsAPI，并有限的支持W3CCascadingStyleSheetsLevel3Specification(WorkingDraft)。
6. Edgemode指示IE以目前可用的最高模式显示内容。当使用IE8时其等同于IE8mode。若(假定)未来放出支持更高兼容性模式的IE，使用Edgemode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。由于edgemode使用该IE版本所能支持的最高模式来显示所浏览的网页内容，建议仅使用于测试页及其他非商用页面。
指定IE8文件兼容性模式
要为你的网页指定文件模式，需要在你的网页中使用meta元素放入X-UA-Compatiblehttp-equiv标头。以下是指定为EmulateIE7mode兼容性之范例。
<html>
<head>
<!--MimicInternetExplorer7-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>MyWebPage</title>
</head>
<body>
<p>Contentgoeshere.</p>
</body>
</html>
其内容随著指定的页面模式而更改，当要模拟IE7时，指定IE=EmulateIE7，指定IE=5,IE=7,或IE=8来选择其中一种兼容性模式。你也可以指定IE=edge来指示IE8使用它支持的最高模式。
X-UA-compatible标头没有大小写之分。然而除了title元素及其他的meta元素之外，它必须出现在网页header节其它元素之前的位置。
设定网站服务器以指定预设兼容性模式
如果你觉得在每个页面加入这段代码比较麻烦，现在介绍一种解决IE8兼容性问题更简便的方法。
如果你用的是IIS服务器，可以配置Web.config文件：
<?xmlversion xmlversion="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear/>
<addname addname="X-UA-Compatible" value="IE=EmulateIE7"/>
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
如果用的是Apache服务器，可以配置httpd.conf文件:
LoadModuleheaders_modulemodules/mod_headers.so
HeadersetX-UA-Compatible“IE=EmulateIE7”
以上是使所有的网页都使用兼容视图。如果只想让个别目录下的文件用兼容视图，在<location>下设置：
<Location /myfolder>
Header set X-UA-Compatible “IE=EmulateIE7”
</Location>
若你已于网站服务器指定了一个预设的IE8文件兼容性模式，你可以在个别页面上指定不同的IE8文件兼容性模式来盖过它。在网页中指定的模式优先权高于服务器中所指定的模式。
判定IE8文件兼容性模式
要判定网页使用IE8浏览时的IE8文件兼容性模式，使用documentobject(文档对象)的documentMode功能。例如在IE8的网址列输入下列程式码会显示目前页面的文件模式。
javascript:alert(document.documentMode);
documentMode功能会回传一个数值对应目前页面的IE8文件兼容性模式，举例来说，若网页指定为支持IE8模式，documentMode便会回传值"8"。
在IE6引入的compatMode功能不支持在IE8引入的documentMode功能。目前使用compatMode建立的应用程式还能在IE8中作用，但它们必须更新为使用documentMode。
若你希望使用JavaScript判定一个文件的兼容性模式，引入下面范例的这段程式码可支持旧版本的IE。
engine=null;
if(window.navigator.appName=="MicrosoftInternetExplorer")
{
//ThisisanIEbrowser.Whatmodeistheenginein?
if(document.documentMode)//IE8
engine=document.documentMode;
else//IE5-7
{
engine=5;//Assumequirksmodeunlessprovenotherwise
if(document.compatMode)
{
if(document.compatMode=="CSS1Compat")
engine=7;//standardsmode
}
}
//theenginevariablenowcontainsthedocumentcompatibilitymode.
}
认识内容属性值
内容属性值在接收到异于先前叙述的数值时是具有弹性的。这能使你对于IE如何显示你的网页更有操控性。举例来说，你可以设定内容属性值为IE=7.5。当你这样做的时候，IE尝试将这个值转换为versionvector并选择最接近的结果。在这个例子中，IE会将其设定为IE7mode。下面的范例显示该模式设定为其他值的状况。
<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=4"><!--IE5mode-->
<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=7.5"><!--IE7mode-->
<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=100"><!--IE8mode-->
<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=a"><!--IE5mode-->
<!--ThisheadermimicsInternetExplorer7anduses
<!DOCTYPE>todeterminehowtodisplaytheWebpage-->
<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7">
注意:前面的范例显示单独的内容值。实际上IE只会执行网页中第一个X-UA-Compatible标头。
你也可以使用内容属性来指定复数的IE8文件兼容性模式，这能帮助确保你的网页在未来的浏览器版本都能一致的显示。欲设定复数的文件模式，请设定内容属性以判别你想使用的模式。使用分号来分开各个模式。
如果一个特定版本的IE支持所要求的兼容性模式多于一种，将採用列于标头内容属性中最高的可用模式。你可以使用这个特性来排除特定的兼容性模式，虽然并不推荐这样做。举例来说，下列标头即会排除IE7mode。
<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=5;IE=8"/>
IE8文件兼容性结论
兼容性对于网页设计师来说是非常重要的顾虑。虽然最好是可以建立一个完全不需依赖任何网页浏览器特性或功能的网站，有时候这是不可能实现的。IE8文件兼容性模式便能将网页限制在某个特定版本的IE中。
使用X-UA-Compatible标头来指定你的页面支持的IE版本。使用document.documentMode判定页面的兼容性模式。选择支持某个特定版本的IE，你可以确保你的页面在未来的浏览器版本中也能有显示的一致性。
2、Css HACK方案
Css HACK介绍
CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Internet Explorer 8,FF等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS Code的过程，就叫CSS HACK！
Css HACK原理
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack。
类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。
选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
HTML头部引用(if IE)Hack：针对所有IE：<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
书写顺序，一般是将识别能力强的浏览器的CSS写在前面。
Css HACK使用
比如要分辨IE6和firefox两种浏览器，可以这样写：
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */ (both IE6 && IE7)
}
</style>
在IE6中看到是红色的，在firefox中看到是绿色的。
解释一下：
上面的css在firefox中，它是认识不了后面的那个带星号的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。
区别不同浏览器，CSS hack写法：
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green;_background:blue;
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；IE6能识别*，某些情况下不能识别 !important，如：
IE6支持重定义中的!important，例如：
.yuanxin {color:#e00!important;}
.yuanxin {color:#000;}
你将会发现定义了样式class="yuanxin"时，在IE下，字体显示为红色（#e00）。
但不支持同一定义中的!important。例如：
.yuanxin {color:#e00!important;color:#000}
此时在IE6下不支持，你将会发现定义了样式class="yuanxin"时，字体显示为黑色（#000）。
但不包括如下这种形式的同一定义中的!important：
#pageOver{height:expression(document.documentElement.offsetHeight)!important; height:100%;}
此种形式的定义，IE6中是可以解释到important的。
所以，IE6 IE7能识别*，也能识别!important; FF不能识别*，但能识别!important; 浏览器优先级别:FF<IE8<IE7<IE6,CSS hack书写顺序一般为FF IE8 IE7 IE6。
以: " #demo {width:100px;} "为例：
#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/
* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
*+html #demo {width:130px;} /*会被IE7执行*/
所以最后,#demo的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px;
各浏览器HACK
IE8 最新css hack：
"\9" 例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox.
"\0" IE8识别，IE6、IE7不能.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.
IE6 hack：
_background-color:#CDCDCD; /* ie 6*/
IE7 hack：
*background-color:#dddd00; /* ie 7*/
IE8 hack：
background-color:red \0; /* ie 8/9*/
IE9 hack：
background-color:blue \9\0;
火狐，遨游，及其它高级浏览器通用：
background-color:red!important;
注意写hack的顺序，其中：
background-color:red\0;IE8和IE9都支持；
background-color:blue\9\0; 仅IE9支持；
background-color:eeeeee\9;支持IE6-IE8，但是IE8不能识别“*”和“_”的CSS HACK。
可综合上述规律灵活应用。
IE9 和 IE8 以及其他版本的区别说明：
background-color:blue; 各个浏览器都认识，这里给firefox用；
background-color:red\9;\9所有的ie浏览器可识别；
background-color:yellow\0; \0 是留给ie8的，最新版opera也认识，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；
+background-color:pink; + ie7定了；
_background-color:orange; _专门留给神奇的ie6；
:root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background- color:purple\0;}，这个新版opera也认识，所以经反复验证最终ie9特有的为:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。
Css HACK 详细参考资料：http://www.swordair.com/tools/css-hack-table/
以上内容，都是在网上搜集了些资料，稍作了些整理，以备后用。不是专门的网页设计人员的话，就稍作了解即可，记得有这嘛回事就OK了。