YUI的Get就专门提供了一套动态加载的机制，是YUI最基础的功能之一。在YUI中利用Get加载JavaScript和CSS资源会在HTML的head节点中插入如下代码：

<script id="..." type="text/javascript" src="some.js"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css">

当页面编码和JavaScript或CSS资源编码不一致时，常见的方法是通过charset属性声明其编码，比如页面是gb2312，而资源文件为utf-8，则设置编码后其插入的代码是

//YUI3.0.0 和 YUI 2.8.0中
<script id="..." type="text/javascript" src="some.js" charset="utf-8"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css" charset="utf-8">

然而，在IE的一些特殊情况下加载JavaScript时，当你刷新页面时会看到状态栏上有如下的错误提示：

当你通过随机参数让JavaScript文件不缓存时，或者让script元素中的charset属性位于src属性之前（比如利用YUI2.8.0之前版本加载）就不会有这个错误提示。所以，这个问题可能是IE的缓存解码机制的bug，也可以看着是YUI的bug（已经提交给YUI开发团队，将在3.1.0中解决）。

因此，动态添加script或CSS资源时，把charset放在资源路径前面是最佳实践。对于YUI，暂时可以这样修改源码来修复。

2009年10月14日中国纪实摄影师卢广的作品《关注中国污染》荣获2009年尤金·史密斯人道主义摄影大奖。卢广说：“我现在考虑的就是怎么能好好地解决这些问题，解决不了也没关系，我先记录，记录对我来说是第一位的。”向其致敬。以下是部分获奖作品。

2009年6月11日：江苏省常熟市氟化学工业园污水处理厂，负责收集处理各化工厂的污水，但他们并没有处理污水，通过管道从长江底延伸1500米处排放污水。

2008年7月19日：江苏连云港盐场工人在愤怒地说，风往我们这边吹时，化工厂排入的气体又臭又刺鼻受不了，到了晚上毒气放得更多

2008年3月18日：河北省涉县天津钢铁厂是重污染企业，企业规模还在不断扩大，严重影响当地居民的生活

2008年3月18日：河北省涉县固新村现有癌症病人50多人，每年癌症死亡20多人

2007年9月24日：在山西临汾市污染严重地区，农民在棉花地里干了两小时的活之后全身都是煤灰

2006年4月23日：在黄河边放羊的老汉受不了第三排水沟散发的臭气

2006年4月22日：宁夏石嘴山湖滨工业园区高大的烟囱上粉尘从天而降，当地居民叫苦连天，他们出门就得做好防范措施

2005年11月25日：广东省贵屿镇河流、水塘都已被污染，村民们只好在被严重污染的水塘里洗涤

2005年7月26日：内蒙古拉僧庙工业园区每天大量的工业污水流向黄河滩

2005年4月10日：宁夏西吉县民工马某带上5个孩子来到内蒙古黑龙柜工业区白灰厂打工，孩子最大的9岁，没有上学，最小的不到2岁。他们在污染严重的地区，孩子们的手脸整天都是脏兮兮的

2005年4月10日：在高耗能、高污染企业的民工没有任何防护措施，照样卖命的干活，每天大量粉尘吸进肺部。在这里干一、二年，他们就感到身体不适，甚至发病，这些民工大多是贫困地区来的

2005年4月8日：15岁的甘肃天水人杨新闰，上完小学二年级就辍学了，跟着父母来到黑龙贵工业区，他一天能赚16元

延伸阅读：

• 卢广在纽约荣获尤金·史密斯人道主义摄影大奖
• “记录是第一位的”
• 卢广，为什么出错的总是你
• 对贺老师“卢广，为什么出错的总是你”一文的回复
• 蜂鸟视觉盛宴：关注中国污染（全部获奖作品）
• 中国水污染地图

DEMO中的style.css有4913个选择符，大小为554kb，但在IE中却在4095个选择符之后失效，所以说明IE的CSS文件不存在不能超过288kb的限制。

所以在IE中对style标签使用addRule方法和cssText属性添加样式时都可能会碰到这个限制，比如使用addRule方法添加第4096个选择符时会报“Invalid Argument”的异常。

实际上在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。具体情况如下：

1. body、img、table、tr、th、td等元素的hasLayout一直为true。
2. type为text、button、file或select的input的hasLayout一直为true。
3. 设置{position:absolute}的元素的hasLayout为true
4. 设置{float:left|right}的元素的hasLayout为true
5. 设置{display:inline-block}的元素的hasLayout为true
6. 设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其hasLayout才能为true：
   1. IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其display的值是block，如demo3就不行。
   2. 元素在怪癖模式（compat mode）下。
7. 设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true，但在IE8的标准模式下则不会触发hasLayout。
8. 设置了{writing-mode:tb-rl}的元素的hasLayout为true。
9. 元素的contentEditable的属性值为true。
10. 在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true，如demo8。

关于hasLayout的更多详情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout

从上面就可以看出IE实现HTML元素的透明如此混乱，为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式，比如CSS Opacity实例中的demo1到demo8，虽然IE团队推荐实现透明的方式是：

{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: .5;
}

而目前简单最好用的实现方式是如CSS Opacity中demo4这样：

{
    filter:alpha(opacity=30);
    opacity:.3;
}

实际上目前最流行的JavaScript框架的设置样式方法都是应用这种方式，并且针对IE设置了{zoom:1}来让元素的hasLayout为true，但在IE8的标准模式下zoom并不能触发hasLayout，所以利用它们设置hasLayout为false的元素的透明度时在IE8的标准模式下是失败的，这个bug在YUI（我已经给YUI团队提交了这个bug，他们会在下个版本修复，最新的2.8.0中依旧存在，期待2.9.0吧）、Prototype、jQuery和Mootools的最新版本中都存在，具体请在IE8标准模式下看demo9到demo11。同样由于在IE8中设置透明度的方式多种多样，所以利用JavaScript获取HTML元素的透明度值需要考虑多种情况，YUI完美解决了这个问题，Prototype比jQuery稍微周全一点，而Mootools直接是bug，具体可以在IE下看demo1到demo8的演示。从这个角度给4个框架来个排名的话，YUI第一、Prototype第二、jQuery第三、Mootools垫底。

我简单的实现了设置和获取Opacity的函数，可以避开上面框架存在的bug，请在IE8标准模式下看demo12：

//设置CSS opacity 属性的函数，解决IE8的问题
var setOpacity = function(el,i){
  if(window.getComputedStyle){// for non-IE
    el.style.opacity = i;
  }else if(document.documentElement.currentStyle){ // for IE
    if(!el.currentStyle.hasLayout){
      el.style.zoom = 1;
    }
    if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效，所以再次设置inline-block
      el.style.display = 'inline-block';
    }
    try{
      //测试是否已有filter
      //http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx
      if(el.filters){
        if(el.filters('alpha')){
	  el.filters('alpha').opacity = i * 100;
	}else{
	  el.style.filter += 'alpha(opacity='+ i * 100 +')';
	 }
       }
    }catch(e){
      el.style.filter = 'alpha(opacity='+ i * 100 +')';
    }
  }
}

//获取CSS opacity 属性值的函数
//借鉴自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle
var getOpacity = function(el){
  var value;
  if(window.getComputedStyle){
    value = el.style.opacity;
    if(!value){
      value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];
    }
    return value;
  }else if(document.documentElement.currentStyle){
    value = 100;
    try { // will error if no DXImageTransform
        value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
    } catch(e) {
        try { // make sure its in the document
            value = el.filters('alpha').opacity;
        } catch(err) {
        }
    }
    return value / 100;
  }
}

不得不说，这些事都是IE整出来的……

1. 辣椒（青椒和尖椒）
2. 黄瓜
3. 香菜：又叫香荽、胡菜、原荽、园荽、芫荽、芫茜、胡荽、莞荽、莚荽菜、莚葛草、满天星、盐熟菜（安徽庐江方言）
4. 大葱
5. 香油、酱油、味精和盐

做法

1. 辣椒、黄瓜和大葱洗净后切成细丝
2. 香菜洗净后切成寸段
3. 把加工好的菜放入大碗中，加入酱油、盐和味精（依据个人口味还可以加入糖和醋），然后进行充分搅拌
4. 最后浇上香油就搞定了
   

传说

这道菜是去了北京才吃到，当时就是因为这个有趣的菜名才点的，吃了之后就喜欢上。来杭州后就一直再没有吃过，于是这周就动手做了一把。当然，有趣的名字也意味着有趣的故事：

1. 传说在东北有一个儿媳妇不太会做家务事，对做菜更是一窍不通。一天家中的婆婆让儿媳妇做一道拿手菜，儿媳妇犯了难，不知从何下手，但还是逞强的将辣椒、黄瓜、大葱、香菜等原料洗净切丝。胡乱的扔在一起用调料凉拌。当这盘“自创”的菜端上桌子，婆婆看见如此离谱的做法，尝了一口不禁感叹的说道：“媳妇，你可真虎啊。”（虎：在东北方言中除了指老虎之外，还意指此人傻、缺心眼。）于是，此后人们就将这道菜称之为“老虎菜”。
2. 张作霖统治东北时，有一段时间不思饮食。就在这时，有个厨师顺手拿起几样蔬菜，举刀就切，黄瓜、大葱、尖辣椒切成丝，香菜切成段，然后放入盐、醋、糖，凉拌一番，就端上了餐桌。张作霖一尝，食欲大振，胃口大开，便向厨师问起这道菜的名字。厨师自知此菜本无名，是随意而为，可又不好据实回答，于是想到这菜是做给“东北虎”张大帅吃的，便顺水推舟地说：“这菜，叫老虎菜。”张作霖一听十分高兴地说：“吃老虎菜好开胃啊。”老虎菜后来走出张氏帅府，成为东北百姓的家常菜。再后来，老虎菜走出东北，又添加了香油、蒜蓉、辣椒粉等调味料，成为许多地方的旺销菜。一拌即成的老虎菜，居然成了一道名菜。
3. 究问其名，有人说这是创新菜，爽脆的黄瓜、鲜嫩的香菜、酸味的米醋、辣味的尖椒、大葱、大蒜，凉拌生吃，爽脆鲜香，强烈刺激舌尖味蕾，无法抵挡，如老虎一般，故称“老虎菜”。如此一说，也不无道理，也就如此这般地传开了。

关于菜料的营养和注意事情请参看百度百科的老虎菜条目。

所谓食物的酸碱性，是指食物中的无机盐属于酸性还是属于碱性。食物的酸碱性取决于食物中所含矿物质的种类和含量多少的比率而定：钾、钠、钙、镁、铁进入人体之后呈现的是碱性反应；磷、氯、硫进入人体之后则呈现酸性。

很早就看过《治疗癌症：酸性体质和碱性食品》，也听说过“弱碱性体质更健康，多吃碱性食物有助于保持身体弱碱性”。但最近有专家说：“明确一种因果关系：人体因不健康而‘酸’，并非因‘酸’而不健康”。人体处于亚健康或不健康状态时，体质确实呈酸性。但如果器官已经受损，即使有办法调整为碱性体质，也不可能恢复健康。人体有强大的激素、神经调整机制，其酸碱度就是通过神经体液调整系统来进行的。与其变着法的找碱性食品，不如维护好神经体液调整系统。要做到这一点，就要养成健康的生活习惯，平衡膳食，坚持适量运动等。

虽然有各种各样的观点，我也无意证明什么，不过从小三同学总结的酸/碱性食物表来看，碱性食物的确符合目前的健康饮食方式。

酸/碱性食物表

常见食 品 酸 碱 度 表

Data URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中：

data:[<MIME-type>][;base64],<data>

1. MIME-type：指定嵌入数据的MIME。其形式是[type]/[subtype]; parameter，比如png图片对应的MIME是image/png。parameter可以用來指定附加的信息，更多情況下是用于指定text/plain和text/htm等的文字编码方式的charset参数。默认是text/plain;charset=US-ASCII。
2. base64：声明后面的数据的编码是base64的，否则数据必须要用百分号编码（即对内容进行urlencode）。

在上个世纪HTML4.01引入了Data URI方案，到今天为止除了IE6和IE7之外，所有主流浏览器都支持，但IE8对Data URI的支持还是有限制的，只支持object（仅是图片时）、img、input type=image、link和CSS中的URL，且数据量不能大于32K。

优点：

1. 减少HTTP请求数，没有了TCP连接消耗和同一域名下浏览器的并发数限制。
2. 对于小文件会降低带宽。虽然编码后数据量会增加，但是却减少了http头，当http头的数据量大于文件编码的增量，那么就会降低带宽。
3. 对于HTTPS站点，HTTPS和HTTP混用会有安全提示，而HTTPS相对于HTTP来讲开销要大更多，所以Data URI在这方面的优势更明显。
4. 可以把整个多媒体页面保存为一个文件。

缺点：

1. 无法被重复利用，同一个文档应用多次同一个内容，则需要重复多次，数据量大量增加，增加了下载时间。
2. 无法被独自缓存，所以其包含文档重新加载时，它也要重新加载。
3. 客户端需要重新解码和显示，增加了点消耗。
4. 不支持数据压缩，base64编码会增加1/3大小，而urlencode后数据量会增加更多。
5. 不利于安全软件的过滤，同时也存在一定的安全隐患。

MHTML

MHTML是MIME HTML (Multipurpose Internet Mail Extension HTML)的缩写，是由RFC 2557定义的把一个多媒体的页面所有内容都保存到同一个文档解决方案。这个方案是由微软提出从IE5.0开始支持，另外Opera9.0也开始支持，Safari可以把文件保存为.mht（MHTML文件的后缀）格式，但不支持显示它。

MHTML和Data URI还比较类似，有更强大的功能和更复杂的语法，并且没有Data URI中“无法被重复利用”的缺点，但MHTML使用起来不够灵活方便，比如对资源引用的URL在mht文件中可以是相对地址，否则必须是绝对地址。hedger在《Cross Browser Base64 Encoded Images Embedded in HTML》针对IE的解决方案使用的是相对路径就是因为声明了Content-type:message/rfc822使IE按照MHTML来解析，如果不修改Content-type则需要使用MHTML协议，这个时候必须使用绝对路径，如《MHTML – when you need data: URIs in IE7 and under》。

应用

Data URI和MHTML两者的配合可以完整的解决所有的主流浏览器，它们由于无法被缓存和重复利用的缺陷，所以并不适合直接在页面中使用，但在CSS和JavaScript文件中对图片适当地使用有非常大的优越性：

1. 大大减少请求数，现在大型网站的CSS引用了大量的图片资源。
2. CSS和JavaScript都可以被缓存，间接的实现了数据的缓存。
3. 利用CSS可以解决Data URI的重复利用问题
4. 告别CSS Sprites，CSS Sprites的出现是为了减少请求数，但它除了带来在不确定情况下的异常外，CSS Sprites还需要人为的图片合并，即使有合并工具也依旧必须人为地在如何有效的拼图上耗费大量的时间，并带来维护的困难。当你遵循一定的设计原则后，你就可以完全抛弃CSS Sprites来编写CSS，最后使用工具在上传到服务器环节把图片转换成Data URI和MHTML，如《利用data-uri合并样式表和图片》中用python实现的工具，这可以节约大量的时间。
5. base64编码把图片文件增加了1/3，Data URI和MHTML同时使用相当于增加了2/3，但CSS和JavaScript可以使用gzip压缩，其可以节省2/3的数据量，所以使用gzip压缩后的最终数据量是(1 + 1/3) * 2 * (1/3) = 8/9，所以最终流量是减少的。

为了方便在CSS中实现Data URI和MHTML，我写了一个Data URI & MHTML 生成器，你可以看利用其生成Data URI & MHTML应用实例。

在CSS文件中使用应用MHTML时URL必须使用绝对路径，导致非常不灵活，所以可以考虑使用CSS expression来解决（DEMO），比如：

   /*
   http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
   http://dancewithnet.com/2009/07/27/get-right-url-from-html/
   */
  *background-image:expression(function(ele){
    ele.style.backgroundImage = 'url(mhtml:' +
         document.getElementById('data-uri-css').getAttribute('href',4) +
         '!03114501408821761.gif)';
   }(this));

相对URL：
    example.php
    demo/example.php
    ./example.php
    ../../example.php
    /example.php
绝对URL：
    http://dancewithnet.com/example.php
    http://dancewithnet.com:80/example.php
    https://dancewithnet.com/example.php

同时HTML中有大量的元素属性值为URL，一般利用JavaScript获取这些URL属性值有两种方法：

<a href="example.php" id="example-a">此时页面绝对URL是http://dancewithnet.com/</a>
<script>
var oA = document.getElementById('example-a');
oA.href ==  'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'example.php';
</script>

我们希望通过直接访问属性的方式得到完整绝对URL，通过getAttribute方法得到其原始的属性值，实际上这是一个比较理想的结果，在所有的A级浏览器中，能顺利得到这个结果的只有Firefox和IE8，其他浏览器都或多或少特殊情况，具体哪些元素的属性存在什么样的情况请看演示实例。

在大部分浏览器中存在的问题是，两种方式都返回的是原始属性值，而实际应用中往往需要的是其绝对的URL，《Dealing with unqualified HREF values》中的解决方案太过于复杂，这里提供一种相对简单的解决方案，如果不考虑区别浏览器代码会非常简单：

<form action="example.php" id="example-form">
此时页面绝对URL是http://dancewithnet.com/</form>
<script>
var oForm = document.getElementById('example-form');

//IE6、IE7、Safari、Chrome、Opera
oForm.action ==  'example.php';
oForm.getAttribute('action') == 'example.php';

//获取绝对URL的通用解决方案
getQualifyURL(oForm,'action') == 'http://dancewithnet.com/example.php';

getQualifyURL = function(oEl,sAttr){
  var sUrl = oEl[sAttr],
      oD,
      bDo = false;
  //是否是IE8之前版本
  //http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/
  //http://msdn.microsoft.com/en-us/library/7kx09ct1%28VS.80%29.aspx
  /*@cc_on
    try{
      bDo = @_jscript_version < 5.8 ?true : @false;
    }catch(e){
      bDo = false;
    }
  @*/
  //如果是Safari、Chrome和Opera
  if(/a/.__proto__=='//' || /source/.test((/a/.toString+''))
                               || /^function \(/.test([].sort)){
    bDo = true;
  }
  if(bDo){
    oD = document.createElement('div');
    /*
    //DOM 操作得到的结果不会改变
    var oA = document.createElement('a');
    oA.href = oEl[sAttr];
    oD.appendChild(oA);
    */
    oD.innerHTML = ['<a href="',sUrl,'"></a>'].join('');
    sUrl = oD.firstChild.href;
  }
  return sUrl;
}
</script>

在IE6和IE7这两个史前的浏览器身上还有一些更有意思的事情，两种方法在HTML元素A、AREA和IMG获取的属性值都是绝对URL，幸好微软为getAttribute提供了第二个参数可以解决这个问题，同时还可以对IFEAM和LINK元素解决前面提到的两种方法都返回原始属性的问题：

<link href="../../example.css" id="example-link">
<a href="example.php" id="example-a">此时页面绝对URL是http://dancewithnet.com/</a>

<script>
var oA = document.getElementById('example-a'),
     oLink = document.getElementById('example-link');

oA.href ==  'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'http://dancewithnet.com/example.php';
oA.getAttribute('href',2) == 'example.php';

oLink.href ==  'example.php';
oLink.getAttribute('href') == 'example.php';
oLink.getAttribute('href',4) == 'http://dancewithnet.com/example.php';
</script>

原文：Henri Sivonen的Activating Browser Modes with Doctype^2009.05.19

文档范围

本文包括的模式转换（mode switching）适用于Firefox和其他基于Gecko的浏览器，Safari、Chrome和其他基于Webkit的浏览器，Opera、 Konqueror、Mac版Internet Explorer、Windows版Internet Explorer和内嵌IE的浏览器。避免提及浏览器引擎的名字，取而代之的是使用该引擎最知名浏览器的名字。

本文着重介绍模式的选择机制，而不是记录每个模式的确切行为。

模式

以下是各种不同的模式：

内容类型为text/html的模式

text/html内容的模式选择取决于doctype嗅探（doctype sniffing，本文后面有讨论）。在IE8中，模式也取决于其他因素。然而在IE8的默认情况下，那些不在微软提供黑名单上的非局域网（non- intranet）站点的模式取决于文档类型。

再怎么强调每个浏览器中模式精确行为的不同也是不过分的，即使本文中进行了统一的讨论。

怪癖模式（Quirks Mode）

怪癖模式中，为了避免“破坏”那些根据在20世纪90年代末流行的实践创作的页面，浏览器违反了现代的Web格式规范。不同的浏览器实现了不同的怪癖行为。Internet Explorer6、7和8中，怪癖模式有效地冻结在IE5.5 。其他浏览器中，怪癖模式是对准标准模式的少量偏移。

如果正在创作新网页，你应该符合相关的规范（特别是CSS2.1）且使用标准模式。

标准模式（Standards Mode）

标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

不同的浏览器遵循不同的阶段，所以标准模式也不是一个单一目标。

HTML5把这种模式叫“非怪癖模式（no quirks mode）”

准标准模式（Almost Standards Mode）

irefox、Safari、Chrome、Opera(从7.5开始)和IE8也有个叫“准标准模式”的模式，它按照传统的做法来实现表格单元格的垂直尺寸而不是严格的遵照CSS2规范。Mac IE5、Windows IE6和7、Opera7.5以前版本和Konqueror无需准标准模式，因为它们至少没有在各自的标准模式下严格遵循CSS2规范来实现表格单元格垂直尺寸。实际上，它们的标准模式更接近Mozilla的准标准模式而不是Mozilla的标准模式。

HTML5把这种模式叫着“受限怪癖模式(limited quirks mode)”。

IE7模式

IE8有个模式主要是冻结了IE7标准模式的副本。其他浏览器没有像这样的模式，且该模式也未被HTML5指定。

内容类型为application/xhtml+xml的模式（XML模式）

Firefox、Safari、Chrome和Opera中，application/xhtml+xml HTTP内容类型（不是meta元素也不是doctype!）会触发XML模式。在XML模式中，浏览器尝试给XML文档在规范上的正确处理达到在制定浏览器中的程度。

IE6、7和8不支持application/xhtml+xml，Mac IE5也如此。

基于WebKit的Nokia S60 浏览器中，application/xhtml+xml HTTP内容类型不能触发XML模式，因为在移动的围墙花园（mobile walled gardens）中关注点是对不规范内容的兼容性。（旧式的“移动浏览器”无法使用真正的XML解析器，因为不规范内容已被标记为XML。）

由于没有充分地测试Konqueror，我无法确切说出在这个浏览器中会发生什么。

非Web模式（Non-Web Modes）

某些引擎拥有的模式与Web内容无关。为了完整性，它们仅仅在这里被提到。Opera有个WML2.0模式。Leopard上的WebKit有个用于旧式Dashboard widgets的特定模式。

影响

以下是这些模式的主要影响：

布局

text/html的模式主要是影响CSS布局。例如，表格不继承样式是个怪癖。在某些浏览器的怪癖模式下，盒模型（box model）变成IE5.5的盒模型。本文档没有列举出所有的布局怪癖。

准标准模式（有这种模式的浏览器中）中，仅包含图片的表格单元格的高和标准模式中不同。

XML模式中，选择器有不同的区分大小写行为。此外，用于HTML body元素的特有规则不能应用在那些没有实现最新CSS2.1改变的较旧版本的浏览器。

解析

也有一些怪癖影响HTML和CSS的解析且会导致符合标准的网页被错误解析。怪癖布局决定了这些怪癖是否开启。无论如何，了解怪癖模式和标准模式在CSS布局和解析（非HTML解析）上的主要异同是非常重要的。

一些人错误地把标准模式称为“严格解析模式（strict parsing mode）”，其让人误解了浏览器强制执行HTML语法规则和用浏览器评估标记的正确性。情况并非如此。即使当标准模式布局生效时，浏览器依旧会做标签杂烩汤（tag soup，http://en.wikipedia.org/wiki/Tag_soup）修正工作。（在2000年Netscape6发布前，Mozilla的确有用于强制执行HTML语法规则的解析模式。这些模式和现有的Web内容不兼容而被遗弃。）

另一个常见的误解是关于XHTML解析的。通常认为用XHTML doctype得到不同的解析。其实并非如此，内容类型是text/html的XHTML文档所用解析器和HTML文档的是同一个。目前浏览器在意的是文档类型为text/html的XHTML仅是“撒面包丁的标签杂烩汤（tag soup with croutons）”（到处是额外的斜线）。

仅当使用XML文档类型的文档（例如：application/xhtml+xml或xmapplication/）会触发XML模式来解析，这时的解析器完全不同于HTML解析器。

脚本

虽然怪癖模式主要是关于CSS的，但也有一些是关于脚本的。例如，Firefox的怪癖模式中，HTML id 属性像在IE一样建立了全局脚本作用域的对象引用。IE8中关于脚本的影响比其他浏览器更值得关注。

XML模式中，某些DOM API的行为彻底不同，因为XML的DOM API行为被定义时不兼容HTML的行为。

doctype嗅探（也叫doctype转换）

现代浏览器使用doctype嗅探来决定text/html文档的引擎模式。这意味着模式的选择是基于HTML文档开始的文档类型声明（或缺少）。（这不适于使用XML文档类型的文档。）

文档类型声明（doctype）是SGML的语法伪造，SGML是个旧式的标记框架，HTML5之前的HTML就是依据其定义的。HTML4.01规范中，文档类型声明描述的是HTML的版本信息。尽管名字叫“文档类型声明”且HTML 4.01规范所描述的是关于“版本信息”，文档类型声明并不适用把SGML或XML文档分类为特定类型的文档，即使它看起来像是（因为名字）。（更多内容在附录中）

HTML4.01规范和ISO 8879（SGML）都没有说关于使用文档类型声明作为引擎模式转换的任何事情。doctype嗅探是基于观察，在doctype嗅探被设计时，绝大部分的怪癖文档既没有文档类型声明也没有引用旧的DTD。HTML5接受这个事实，且定义了text/html中doctype作为唯一的模式转换。

典型的预HTML5（pre-HTML5）文档类型声明包含（被空白分开）“<!DOCTYPE”字符串，根元素（“html”）的通用标识符， “PUBLIC”字符串，处于引号中的DTD公共标识符，同一DTD的可能系统标识符（URL）和字符 “>”。文档类型声明位于文档的根元素开始标签之前。

选择doctype

text/html

下面是创建新的text/html文档时如何选择doctype的简单指南：

标准模式，最前沿的验证

<!DOCTYPE html>

如果想验证诸如<video>、<canvas>和ARIA这样的新特性，那么这样做是对的。注意，HTML5的有效定义依旧在变化中，请确保在Firefox、Safari、Chrome、Opera9或Opera10中测试图像对齐。在Internet Explorer中测试图像对齐是不足够的，无论如何请确保在IE8中也进行了测试。

标准模式，更稳定的验证目标

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

这个doctype也会触发标准模式，且10岁大的HTML4.01有效定义是稳定的。请确保在Firefox、Safari、Chrome、 Opera9或Opera10中测试图像对齐。在Internet Explorer中测试图像对齐是不足够的，无论如何请确保在IE8中也进行了测试。

要使用标准模式，但仍要验证不推荐标记或在表格布局中使用切片图像且不想去修复它们。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

它会触发准标准模式（和老掉牙的Mozilla中的完全标准模式full Standards mode）。请注意，如果以后移植到HTML5上，基于利用表格实现的切片图像的布局可能会被破坏（且完整标准模式也如此）。

故意要使用怪癖模式

没有doctype。

请别这样做。故意为怪癖模式所做的设计将会困扰你，在将来你的同事或继任者甚至没有人关心Windows IE6（Netscape4.x和IE5已经没有人关心了）。为怪癖模式设计是个坏主意。相信我。

如果你想依旧支持Windows IE6，对它做一个特别的hack使用条件注释比使其他浏览器退步到怪癖模式好。

我不推荐任何的XHTML doctype，因为XHTML被用作text/html被认为是有害的。无论如何，如果你选择使用XHTML doctype，请注意XML声明会使IE6（但不是IE7！）触发怪癖模式。

application/xhtml+xml

对application/xhtml+xml的简单指南是绝不使用doctype。该方式下的网页不是“严格一致”的XHMTL1.0，但这并不重要。（请看后面的附录）

IE8 并发症

A List Apart 曾介绍 ，IE8除doctype外会使用基于meta元素的模式转换作为模式选择的因素之一。（请看Ian Hickson、David Baron、David Baron again、Robert O’Callahan 和 Maciej Stachowiak的评论。）

IE8有4种模式：IE5.5怪癖模式、IE7标准模式、IE8 准标准模式 和IE8标准模式。模式的选择取决于来自几个方面的数据：doctype、meta元素、HTTP头、来自微软的定期下载数据、局域网域、用户所做设置、局域网管理员所做设置、父框架的模式（如果有）和地址栏兼容视图按钮被用户触发。（对于嵌入该引擎的其他应用，模式也取决于嵌入的应用。）

幸运的是如果出现下列情况，IE8大体上会像其他浏览器一样使用doctype嗅探：

• 作者没有设置X-UA-Compatible HTTP头
• 作者没有设置X-UA-Compatible meta标签
• 微软没有在黑名单中放置该站点的域名
• 局域网管理员没有把该站点放置到黑名单上
• 用户没有按下兼容视图按钮（Compatibility View button） (或以其他方式添加到某个特定的用户黑名单中)
• 该站点不在局域网域中
• 用户没有选择在IE7中显示所有站点
• 页面没有通过frame嵌入到兼容模式的页面中

上述除两个关于X-UA-Compatible的情况外，IE8像IE7一样执行doctype嗅探。IE7仿真（ IE7 emulation）叫兼容视图。

在 X-UA-Compatible 情况下，IE8的行为和其他浏览器完全不同。想看本页的附录或PDF和PNG格式的流程图。

不幸的是，没有 X-UA-Compatible的HTTP头或meta标签，即使使用了合适的doctype，IE8让用户无意间使页面从IE8的标准模式降到IE7模式，这是一种仿真的IE7标准模式。更糟糕的是，局域网管理员也可以这么做。微软也可以把你所用的所有域名到列入黑名单。

为了对付这些影响，doctype是不够的，你需要X-UA-Compatible HTTP头和meta标签。

下面的简单指南是针对已经有doctype在其他浏览器触发标准模式或者准标准模式的新的text/html文档如何选择X-UA-Compatible HTTP头或meta标签的：

你的域名没有在微软的黑名单上，你更关注是没有浏览器专属的令人讨厌的东西而不是确保用户无法回退去呈现IE7的行为。

你不需要包括X-UA-Compatible HTTP头或meta标签。

你的域名在微软的黑名单中，由于你域名中的其他作者破坏了站点或许导致用户对整个域启用了兼容视图，你担心Google或Digg用frame嵌入你的站点或你想确保用户无法使用兼容视图

首先，在你的页面包含后面的meta元素（它在HTML5中是非法的） <meta http-equiv="X-UA-Compatible" content="IE=Edge"> （在任何脚本元素前），或者设置后面的HTTP头：X-UA-Compatible: IE=Edge

你的站点在IE7中工作但在IE8中破坏

首先，在你的页面包含后面的meta元素（它在HTML5中是非法的）（在任何脚本元素前），或者设置后面的HTTP头： X-UA-Compatible: IE=EmulateIE7，然后修复你的站点不依赖非标准的IE7行为和迁移到IE=Edge。

相关链接

• Eric Meyer在使用正确doctype中写的关于Mac IE5的模式
• Mozilla的doctype嗅探 by David Baron
• Lance Silver在IE6中的CSS增强中讨论了在Windows IE6中的模式和doctype嗅探
• Opera9的doctype转换
• Faruk Ateş的IE8和X-UA-Compatible解决方案

补遗：对XML的实现者和规范作者的恳求

请不要把doctype嗅探带到XML。

doctype嗅探是用签杂烩汤似的方法解决一个标签杂烩汤问题。doctype嗅探是在HTML4和CSS2规范发布后设计的一种试探方法，它从文档中区分出过时文档以符合其作者可能期望的行为。

偶尔有人建议在XML上使用doctype嗅探来调度不同的处理、识别正在使用的词汇表或激活特性。这是个坏主意。调度和词汇表识别应该是基于名字空间的，而特性激活应该是基于明确的处理指令或元素。

良构（well-formedness）的整个思想是介绍允许XML的无DTD解析，且推广无doctype文档。在正式情况下，两个XML文档有相同的规范形式且应用不同地处理它们（且不同之处并非因为没有选择处理外部实体），这个应用或许被破坏了。在实践情况下，如果两个XML文档导致同样的内容被报告（qnames忽略）给SAX2内容处理器且应用不同地处理文档，这个应用或者被破坏了。考虑到作为 Web作者无法相信每个人都会使用解决额外实体的XMLprocessor来解析其页面（即使一些浏览器看起来这样做，因为它们会映射一定公共的标识符到一个有删节的定义实体的DTD），插入doctype到XML中用于Web是毫无意义的且通常会导致货运崇拜（cargo cultish）习惯。(您仍然使用W3C验证器的DTD覆盖功能来对一个DTD进行验证，虽然W3C验证器会说结果仅仅是暂时有效。或更好的是，你可以用放宽NG验证，它不会污染模式引用的文档。)为了嗅探而要求doctype是非常愚蠢的，即使那是在HTML实践中的解决方法。

此外，当低级别的规范定义两个相等的东西时，高级别的规范不应该尝试给它们不同的含义。请考虑<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">。如果删除公共标识符，依旧指定了同样的DTD，因此doctype <!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">表示和前面的doctype一样。应该不同地嗅探它们么？可以进一步理论。假设复制给example.com一个叫foobar.dtd的DTD：<!DOCTYPE html SYSTEM "http://example.com/foobar.dtd">。这该如何嗅探？应该是同一个意思。甚至整个DTD可以贴在文档中。

换句话说，如果有#include “foo.h”，你不应该给名字foo.h绑定任何black magic，因为它应该允许复制foo.h的内容到文档中或复制foo.h到bar.h中且表示#include “bar.h”。

我不担心HTML和SGML构造相同的参数的原因是Web浏览器不会使用真正的SGML解析器去解析HTML，所以我认为伪装成SGML进行处理是没有用的。无论如何，如果你还不相信，请看W. Eliot Kimber关于此事的文章 comp.text.sgml

附录：text/html中一些doctype的处理方式

下表中，怪癖模式、标准模式和准标准分别表示为Q、S和A。当浏览器仅有两种模式时，如果表格单元格的行高和Mozilla的标准模式表现一致时，标准模式标记为“S”，如果表格单元格的行高和Mozilla的准标准模式表现一致时，则标记为“A”。

请注意使用XML内容模型提供服务的XHTML在XML模式下渲染。

本表的目的并不是说表中所有的doctype都是新建页面的合理选择。本表的目的是为了展示我的推荐是依据什么样的数据。

下列的简写符号是用于列标题：

NS6

Mozilla 0.6…0.9.4 和 Netscape 6.0…6.2.3

Old Moz

Mozilla 0.9.5 到 1.1 alpha 和 Mozilla 1.0

Moz & Safari & Opera 10 & HTML5

Mozilla 1.0.1, Mozilla 1.1 beta和更高版本, Firefox 到 Netscape 7, Safari 0.9 到 Safari 4.0 beta, Opera 10, Chrome, Konqueror 3.5, HTML5指定的行为

Opera 9.0

Opera 9.0…9.20

IE 8 & Opera 9.5

无 X-UA-Compatible和兼容模式覆盖的默认IE8（该情况下“A”意味着IE8准标准模式）、 Opera 7.5…8.54 和 9.5…9.6

IE 7 & Opera 7.10

IE7、兼容模式且无X-UA-Compatible覆盖的IE8（这种情况下“A”意味IE7模式）和Opera 7.10…7.23

IE 6 & Opera 7.0

Windows IE 6 和 Opera 7.0…7.03

Mac IE 5

Mac IE 5.0…5.2.3

Konq 3.2

Konqueror 3.2.2…3.3 (也可能包括 3.1…3.2.1; 我尚未确定)

历史记录

Moziila的doctype嗅探代码在2000年10月、2001年9月和2002年6月有大幅度的修改。本文档描述的Mozilla（和 Netscape 6.x）建立的状态可以自2000.10.19起在ftp.mozilla.org上看到。本文档未涉及Mozilla M18（和Netscape 6.0 PR3）中的doctype嗅探的工作方式。Safari的doctype嗅探代码自第一个公开的测试版起也有大幅度的修改。本文档不包括比版本V73也叫0.9更早的行为。

Konqueror3.5之前的doctype嗅探代码似乎来自于Safari的很早的一个版本。Konqueror现在和Safari匹配，其doctype嗅探代码来自Mozilla。

从表中可见，Opera的doctype嗅探正由规律的从类似IE向类似Mozilla转变，虽然Opera9.5和9.6在倒退的路上。同时，Opera怪癖模式的布局行为已从仿效IE6的怪癖模式转换到Mozilla的怪癖模式。

附录：IE8的模式选择

开始：进入“X-UA-Compatible meta?”

X-UA-Compatible meta?

IE=7：使用IE7标准

IE=EmulateIE7: 进入“怪癖或无doctype?(兼容模式)”

IE=IE8 或 IE=IE7 或 IE=a 或 IE=EmulateIE8 或没有或首先出现 script：进入”X-UA-Compatible HTTP头?”

IE=8 或 IE=Edge 或 IE=99 或 IE=9.9：进入“准标准模式?”

IE=5：使用怪癖模式（IE5.5）

X-UA-Compatible HTTP头?

IE=7：使用IE7标准模式

IE=EmulateIE7：进入“怪癖或无doctype？（兼容模式）”

IE=IE8 或 IE=IE7 或 IE=a 或 IE=EmulateIE8 或没有：进入“显示所有站点…预设置？”

IE=8 或 IE=Edge 或 IE=99 或 IE=9.9：进入“准标准模式？”

IE=5：使用怪癖模式（IE5.5）

怪癖模式或无doctype?(兼容模式)

是：使用怪癖模式（IE5.5）

否：使用IE7标准模式

显示所有站点…预设置？

是：进入“怪癖模式或无doctype?(兼容模式)”

否：进入“显示局域网站点…预设置？”

显示局域网站点…预设置？

是：进入“站点位于局域网域？”

否：进入“域名在微软维护的名单上？”

域名在微软维护的名单上？

是：进入“怪癖模式或无doctype?(兼容模式)”

否：进入“被兼容模式页面用Frame嵌入？”

被兼容模式页面用Frame嵌入？

是：进入“怪癖模式或无doctype?(兼容模式)”

否：进入“按下了兼容模式按钮？”

按下了兼容模式按钮？

是：进入“怪癖模式或无doctype?(兼容模式)”

否：进入“怪癖模式或无doctype?(IE8)”

怪癖模式或无doctype?(IE8)

是：进入“使用怪癖模式（IE5.5）”

否：进入“准标准模式？”

准标准模式？

是：使用IE8准标准模式

否：使用IE8标准模式

这些步骤都可以通过PDF和PNG格式的流程图看到。

鸣谢

感谢Simon Pieters、Simon Pieters和Anne van Kesteren帮助我改正了各种Opera版本的模式表和他们的评论。感谢Simon Pieters制作了另一份IE8的流程图。

1. 土豆：学名是马铃薯，“土豆”是方言说法。
2. 花椒：别名香椒、大花椒、青椒、青花椒、山椒、狗椒、蜀椒、川椒、红椒、红花椒、大红袍，因其味麻，又称作麻椒
3. 香葱
4. 植物油、盐

作法

1. 土豆去皮后切成薄片，用水浸泡，临用时捞出沥干
2. 倒入适量的油，旺火烧之六成热
3. 撒入适量花椒，有花椒香味溢出时，立即倒入土豆片翻炒之，如果能颠锅就更好了
4. 待土豆片稍软且弱有透明时，撒入适当的食盐，继续翻炒
5. 片刻后，关火出锅

注意

1. 凡腐烂、霉烂或生芽较多的土豆，因含过量龙葵素，极易引起中毒，一律不能食用。
2. 土豆宜去皮吃，有芽眼的部分应挖去，以免中毒。
3. 土豆切开后容易氧化变黑，属正常现象，不会造成危害。
4. 把切好的土豆片、土豆丝放入水中，这样避免了其氧化变黑，又可以去掉太多的淀粉避免炒糊。但注意不要泡得太久而致使水溶性维生素等营养流失。

营养

土豆味甘、性平、微凉，入脾、胃、大肠经；有和胃调中，健脾利湿，解毒消炎，宽肠通便，降糖降脂，活血消肿，益气强身，美容，抗衰老之功效。主治胃火牙痛、脾虚纳少、大便干结、高血压、高血脂等病症；还可辅助治疗消化不良、习惯性便秘、神疲乏力、慢性胃痛、关节疼痛、皮肤湿疹等症。

花椒除各种肉类的腥气；促进唾液分泌，增加食欲；使血管扩张，从而起到降低血压的作用；服花椒水能去除寄生虫；有芳香健胃、温中散寒、除湿止痛、杀虫解毒、止痒解腥的功效。

香葱有助消化、解热、通便的作用。