WEB标准化越来越受到重视了，像我经常逛蓝色理想的，在论坛里经常会看到有关W3C标准的疑问。但不少人还是不太理解所谓标准的含意，太过于执着于W3C标准验证。说起来WEB标准的确也蛮抽象点的，我也是经历了一段时间慢慢体会的，不过在这里我希望通过一个十分明了的比喻，让大家能快速地对W3C标准有个理性上的认识。
就好比我们写文章，在这里我们定下的标准是要用中文来写！那么，只要是用中文写出来的文章，而且没有错别字，语句也通顺，那么这一篇文章就算是通过标准的文章。当然你也可以夹杂一些英文或其他什么的鸟文，这样的结果只是会有些人看得懂有些人会看不懂而已。但是，这篇文章究竟写得好不好？文笔如何？写得过于冗长还是太过苍白？会不会引人入胜……这些都不是我们的标准能够判断的。想要写出好文章（写出好页面），标准是肉体，文笔是灵魂。没有灵魂的肉体只是行尸走肉，而伟大的灵魂就算肉体有所残缺依然掩盖不了其伟大。
相信这个比喻大家都能理解吧。
IE8来了，于是不少的项目要求中都会增加了兼容IE8这一条，但当前IE8还很不完善，还算是测试版中，之前某些已经兼容的页面，放到IE8中却变得惨不忍睹，相信很多web desginer都有同感吧。还好IE8提供了一个新的标签X-UA-Compatible，它只能被IE8识别，用来设置IE8的兼容性，就好比现在的vista要去兼容一些旧版的程序一样。
网上找到的相关资料基本上都是同一篇译文，也不知最初的译者是谁了，我就直接转载过来啦。
英文原文：http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
前言
为了帮助确保你的网页在所有未来的IE版本都有一致的外观，IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式，文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。
新的IE为了确保网页在未来的版本中都有一支的外观，IE8引入了文件兼容性。当你引入一个增设的兼容性模式，此文章说明文件兼容性的必要性，列出现有版本IE能使用的文件兼容性模式并示范如何选择特定的兼容性模式。
了解文件兼容性的必要性
每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色，其中一个风险就是旧版本网站无法正确的显示。
为了将这个风险降到最低，IE6允许网页开发人员选择IE编译和显示他们网页的方式。”Quirks mode”为预设，这会使页面以旧版本浏览器的视点显示，”Standards mode”(也称为”strict mode”)特点是支持业界标准最为完善。然而要利用这个增强的支持功能，网页必须包含恰当的<!DOCTYPE>指令。
若一个网页没有包含<!DOCTYPE>指令，IE6会将它以quirks mode显示。若网页包含有效的<!DOCTYPE>指令但浏览器无法辨识，IE6会将它以IE6 standards mode显示。因为少数网站已经包含<!DOCTYPE>指令，兼容性模式的切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。
随著时间经过，更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说，IE6不支持universal selector(即css之全局选择器 * {})，一些网站便使用它来针对IE做特定的对应。
当 IE7增加了对全域选择器的支持，那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的特定对应无法应用于IE7，造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式，受到影响的网站拥有者被迫更新他们的网站使其能支持IE7。
IE8 比之前的任何版本浏览器都更支持业界标准，因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮助减轻所有问题，IE8引入文件兼容性的概念，使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加了一些新的模式，这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示，你可以更新你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器编译你的页面。
这能让你选择将你的网站更新支持IE8新特点的时机。
认识文件兼容性模式
IE8支持几种文件兼容性模式，它们具有不同的特性并影响内容显示的方式。
•Emulate IE8 mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode，Emulate IE8 mode重视<!DOCTYPE>指令。
•Emulate IE7 mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不同于IE7 mode，Emulate IE7 mode重视<!DOCTYPE>指令。对于许多网页来说这是最推荐的兼容性模式。
•IE5 mode 编译内容如同IE7的quirks mode之显示状况，和IE5中显示的非常类似。
•IE7 mode编译内容如同IE7的standards mode之显示状况，无论网页是否含有<!DOCTYPE>指令。
•IE8 mode提供对业界标准的最高支持，包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API，并有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working Draft)。
•Edge mode指示IE以目前可用的最高模式显示内容。当使用IE8时其等同于IE8 mode。若(假定)未来放出支持更高兼容性模式的IE，使用Edge mode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。
由于edge mode使用该IE版本所能支持的最高模式来显示所浏览的网页内容，建议仅使用于测试页及其他非商用页面。
指定文件兼容性模式
要为你的网页指定文件模式，需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头。以下是指定为Emulate IE7 mode 兼容性之范例。
1 2 3 4 5 6 7 8 9 10 | <html> <head> <!-- Mimic Internet Explorer 7 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>My Web Page</title> </head> <body> <p>Content goes here.</p> </body> </html> |
其内容随著指定的页面模式而更改，当要模拟IE7时，指定IE=EmulateIE7，指定IE=5, IE=7, 或IE=8来选择其中一种兼容性模式。你也可以指定IE=edge来指示IE8使用它支持的最高模式。
X-UA-compatible标头没有大小写之分。然而除了title元素及其他的meta元素之外，它必须出现在网页header节其它元素之前的位置。
设定网站服务器以指定预设兼容性模式
网站管理员可籍着为网站定义一个自订标头来为他们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。举例来说，下列的web.config文件使Microsoft Internet Information Services (IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。
1 2 3 4 5 6 7 8 9 10 11 | <?xml version="1.0" encoding="utf-8"?> <configuration> <system.webServer> <httpProtocol> <customHeaders> <clear /> <add name="X-UA-Compatible" value="IE=EmulateIE7" /> </customHeaders> </httpProtocol> </system.webServer> </configuration> |
若你已于网站服务器指定了一个预设的文件兼容性模式，你可以在个别页面上指定不同的文件兼容性模式来盖过它。在网页中指定的模式优先权高于服务器中所指定的模式。
请查阅你的网站服务器关于指定自订标头的资讯，或看更多资料:
Implementing the META Switch on Apache
Implementing the META Switch on IIS
判定文件兼容性模式
要判定网页使用IE8浏览时的文件兼容性模式，使用document object(文档对象)的documentMode功能。例如在IE8的网址列输入下列程式码会显示目前页面的文件模式。
javascript:alert(document.documentMode);
documentMode功能会回传一个数值对应目前页面的文件兼容性模式，举例来说，若网页指定为支持IE8模式，documentMode便会回传值”8″。
在IE6引入的compatMode功能不支持在IE8引入的documentMode功能。目前使用compatMode建立的应用程式还能在IE8中作用，但它们必须更新为使用documentMode。
若你希望使用JavaScript判定一个文件的兼容性模式，引入下面范例的这段程式码可支持旧版本的IE。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | engine = null; if (window.navigator.appName == "Microsoft Internet Explorer") { // This is an IE browser. What mode is the engine in? if (document.documentMode) // IE8 engine = document.documentMode; else // IE 5-7 { engine = 5; // Assume quirks mode unless proven otherwise if (document.compatMode) { if (document.compatMode == "CSS1Compat") engine = 7; // standards mode } } // the engine variable now contains the document compatibility mode. } |
认识内容属性值
内容属性值在接收到异于先前叙述的数值时是具有弹性的。这能使你对于IE如何显示你的网页更有操控性。举例来说，你可以设定内容属性值为IE=7.5。当你这样做的时候，IE尝试将这个值转换为version vector并选择最接近的结果。在这个例子中，IE会将其设定为IE7 mode。下面的范例显示该模式设定为其他值的状况。
1 2 3 4 5 6 7 8 | <meta http-equiv="X-UA-Compatible" content="IE=4"> <!-- IE5 mode --> <meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode --> <meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode --> <meta http-equiv="X-UA-Compatible" content="IE=a"> <!-- IE5 mode --> <!-- This header mimics Internet Explorer 7 and uses <!DOCTYPE> to determine how to display the Web page --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> |
注意: 前面的范例显示单独的内容值。实际上IE只会执行网页中第一个X-UA-Compatible标头。
你也可以使用内容属性来指定复数的文件兼容性模式，这能帮助确保你的网页在未来的浏览器版本都能一致的显示。欲设定复数的文件模式，请设定内容属性以判别你想使用的模式。使用分号来分开各个模式。
如果一个特定版本的IE支持所要求的兼容性模式多于一种，将採用列于标头内容属性中最高的可用模式。你可以使用这个特性来排除特定的兼容性模式，虽然并不推荐这样做。举例来说，下列标头即会排除IE7 mode。
<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />结论
兼容性对于网页设计师来说是非常重要的顾虑。虽然最好是可以建立一个完全不需依赖任何网页浏览器特性或功能的网站，有时候这是不可能实现的。文件兼容性模式便能将网页限制在某个特定版本的IE中。
使用X-UA-Compatible标头来指定你的页面支持的IE版本。使用document.documentMode判定页面的兼容性模式。
选择支持某个特定版本的IE，你可以确保你的页面在未来的浏览器版本中也能有显示的一致性。
这游戏也很简单，也就是想自己练练算法了。这里只是个DEMO，但主要部分都包括了。主要是因为对界面设计实在头疼，再者做练习嘛，而且是被别人做得不爱做了的游戏，就没弄得那么完整了。
其实对于高手来说，拼图游戏只算是小菜了。我不是高手，也许我的方法不是最优的，但绝对是原创的，相信还是能给一些正在学习中的朋友一些帮助。过些天整理一个小教程出来吧，到时连源码一起发。
不知有没有朋友碰到过这类的问题，在某些浏览器中，点击FLASH中的链接会被当做弹窗给拦截屏蔽掉。而也许有些朋友一直都没碰到过这个问题。其实这只是一个小小的习惯性问题。
其实以前我也都没有注意到这点，在FLASH中做链接的时候，往往都用on(press){}来触发，而这正是造成这个问题的原因，改为on(release) {}就没事了。同样，在AS3中用CLICK事件来触发的话，也会碰到被拦截的问题，推荐采用MOUSE_DOWN或者MOUSE_UP。但还有的朋友说，已经这样做了但还是被拦截，那就没办法了，采用终极招式吧，在FLASH的上面浮动一个等大的A标签，当然还需要填充透明GIF在里面，这样才能在IE中触发点击区域，把链接直接写到这个A标签就好了，其实现在有蛮多大站也都采用这种方法的呢。
曾经做过一么一题面试题，大体上的要求是这样的：一个新闻列表，日期要紧随标题之后，标题太长时可以自动隐藏，但日期要显示完整。
就这么个题目，看起来似乎很简单，但做起来似乎就没那么简单了。因为这里要求是时间紧随标题之后，如果是时间右对齐的话，相信大多数人片刻就能搞定。有兴趣的朋友不妨先不看下面的源码，自己做做试试。
因为日期是跟在标题后面的，所以这里要用内联标签，但这会在自动隐藏标题的时候出现问题。最后，想到了一种特殊的处理方法。外框的宽度比如说是300px，那么就把ul的宽度定为240px，然后通过绝对定位把日期从文档流中拖出，这时当标题达到ul的宽度的时候将之隐藏，而日期因为浮动而跟随其后，就达到所要的效果了。
PS：原来没有考虑到opera的兼容，现已修正，不过用了hack，暂时没想到好方法了。
提示：你可以先修改部分代码再运行。
首先，说明一下这不是纯CSS的，如果要用纯CSS实现的话要用到很多[if IE 6]的判断，感觉页面的标签很乱，个人不太喜欢。说到底还是因为这万恶的IE6,基本上问题都是出在这里，本例用的是JS，但也用了一个[if IE 6]的判断，用来在IE6下改变标签的class。虽然是用了JS，但页面结构却清爽得多。
可能有些朋友见过，原本是在一个国外网站上看到的，不过写得有点复杂，我简化了一下，帖上来。
提示：你可以先修改部分代码再运行。
