源码文件：grids.css
压缩版本：grids-min.css
合并版本：reset-grids-min.css
测试页面：grids-taobao.html

命名规则和样式生成工具：css-generator.html

更新说明

1. 精简了 grids.css 文件，只保留布局基础样式。需要某种具体布局时，可以用 css-generator.html
   生成。
2. 更改了命名规则，使其能见名知意。详细命名规则请阅读 css-generator.html

使用说明

1. 在页面中引入 grids-min.css 或 reset-grids-min.css
2. 利用生成工具 css-generator.html, 生成需要的布局样式。
3. 所有布局的 DOM 结构是一样的，可参考 grids-taobao.html
4. 在布局的 className 中添加 layout grid-sXm0eY

欢迎使用和提出宝贵的建议。

更新说明：

1. 调整了字体和行高，请参见 三谈 Web 默认字体。
2. 将 h1 到 h3 的默认字号调整为 font-size: 100%;
3. 去掉了 tt, abbr, hr, q 的重置样式。原因是：tt, q 不推荐使用。hr 的差异，具体页面去负责。abbr 的默认样式在各浏览器下虽然有差异，但并不会带来问题，重置意义不大。
4. 加入了对 sup, sub 的重置样式。
5. 增加了 reset-post.css, 方便重置以大段文字展示为主的内容区块。测试页面：test-post.html

最后，贴一份代码：

/*
KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
     2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
     3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：1. 适应中文；2. 基于最新主流浏览器。
维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
Revision: 276
*/

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
    margin: 0;
    padding: 0;
}

/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
    font: 12px/1.5 tahoma, arial, simsun, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/** 重置列表元素 **/
ul, ol { list-style: none; }

/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }

sup { vertical-align: text-top; } /* 重置，减少对行高的影响 */
sub { vertical-align: text-bottom; }

/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */

/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

web-default-font.html

1. Tahoma 字体的问题，小麦总结过。在 IE6 下，Arial 字体在下划线的显示上的确略有优势，甚至有神奇的魔数 1.231 来让中英文对齐。但除了 IE6, 其它浏览器下，Arial 表现并不好。考虑门户网站的设计趋势，链接加下划线的形式，已逐步去掉，比如 YAHOO 首页。国内腾讯首页也早就去掉了满屏的下划线，目前只有新浪、搜狐等站点依旧满屏下划线。考虑 IE6 的占有率正逐步降低以及面向未来编程，坚持用 Arial 优势不大。

2. 在再谈中，考虑渐进增强，把 Helvetica 放在首位。后来仔细测试发现，如果系统中没有安装 Helvetica 字体，font-family: helvetica,tahoma,arial; 的写法，会直接无视 Tahoma. 具体请看上面的测试页面。这个 bug 是致命的，不得不忍痛割爱，去掉 Helvetica.

3. 宋体的问题不多说。记住：只要 Opera 存在且有一定市场占有率，就别用 SimSun 这种写法。

4. 行高的问题。再谈里提到 1.5 会导致一些诡异 bug（主要是垂直居中对齐，需要重置行高为 1）。和同事讨论后，觉得与 line-height: 1 带来的风险相比，还是 1.5 让人放心。

5. GB 编码问题。font: 12px sans-serif; 不设置宋体，页面为 GB 系列编码时，非中文操作系统下（港台用户中有不少英文系统，还有海外华人），IE 的默认字体是 Microsoft Sans Serif Regular, 很难看。截图为证：

有两个解决方案：a. 用”宋体”垫底；b. 不加 sans-serif.

6. 宋体用 \5b8b\4f53 表示是为了避免文件编码不一致时带来的问题。

综上，我们可以得到 Web 默认中文字体的最佳方案：

理想主义者方案 A（所有页面用 utf-8 编码）

font: 12px/1.5 tahoma, arial, sans-serif;

理想主义者方案 B（有 gb 编码的页面）

font: 12px/1.5 tahoma, arial, simsun, sans-serif;

现实主义者方案 A

font: 12px/1.5 tahoma, arial;

现实主义者方案 B

font: 12px/1.5 arial;

可用性主义者方案：

font-family: verdana, arial, sans-serif;

2009-12-04 补充：经朋友提醒，Opera 下的默认中文字体就是宋体，因此只要宋体后无其它中文字体，用 simsun 是没问题的。上面的最佳方案做了相应调整。

1. 优先级的描述不严谨，有 !important 时，网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。

2. Tahoma 字体从 Win95 就有了，并且从 Win2000 开始，Tahoma 成为 Win 英文系统的默认字体。2007 年，在 Mac OS X v10.5 (Leopard) 中也开始内置 Tahoma 字体。至今，普及性还是相当不错的。

3. Google, YAHOO 等网站，首选 Arial, 个人觉得是出于兼容性考虑。Google 需要考虑到对各种设备的支持，这就和 Google 首页继续采用 table 布局一样，table 布局可以保证在尽可能多的用户终端中正确显示。Arial 字体同理。

4. 但这并不代表 Google 等页面的做法就是最好的。从渐进增强角度讲，font-family: Tahoma, Helvetica, Arial, sans-serif; 可以达到优雅降级的目的。在更好的用户代理中，显示更好的字体，同时用 Arial 殿后，也能保证在尽可能多终端设备中正确显示。渐进增强无处不在，需要我们的共同努力和推广。（注：考虑 Mac 用户，Leopard 中内置了 Tahoma 字体，因此 font-family: Helvetica, Tahoma, Arial, sans-serif; 会更渐进增强一些）

5. 不推荐省略默认字体族。这就和省略 </body> 一样，99.99% 的情况下不会导致问题，并且是一种优化手段。但除了特殊页面（比如 Google 首页），普通页面普通流量下，节省这一点字符，不利于 Web 标准的整体进步。

6. 不设置宋体，在 GBK 编码时，英文操作系统下，IE 的默认字体是 Microsoft Sans Serif Regular. （注：不设置 sans-serif 可以避免此问题，但考虑上面第 5 条，依旧推荐前面加“宋体”来解决该问题）

7. 根据可用性大师 Jackob Nielsen 的调查，在目前计算机显示器的 dpi 下，无衬线字体比有衬线字体更易读。用户调研显示，Verdana 字体是易读性最高的，推荐设置为第一默认字体。这一点，可以参考 ALA 的字体设置，阅读起来的确很舒服。

8. Tahoma 字体的问题是，斜体时，特别是小号时，文字不易阅读，还有就是小麦总结过的下划线问题。Verdana 字体的问题是，字号相同时，比其它字体显示偏大偏宽，这导致混排时效果不佳。考虑中文网页中，一般很少用斜体，因此 Tahoma 依旧是首选。

9. 关于默认行高，对于博客等以大段文字为主的应用来说，1.5 是个很不错的选择。但对于淘宝的大部分页面来说，1.5 会导致 li, hx, div 等所有元素的默认行高都是 1.5, 这会给实际工作带来不少重置工作量和某些诡异 bug（小虎 & 有脚，赶快总结哦）。我更倾向于 body { line-height: 1; } p { line-height: 1.5; }

10. 字体对性能和效率的影响，可以忽略。有时候，勿以善小而为之。97% 的情况下，不成熟的优化是万恶之源。

11. 未来：若干年后，随着显示器 dpi 的提高，网页默认字体很可能会和传统印刷业的推荐字体一致 —— 采用衬线字体。等以后再说了。

最后，我的推荐是：

body { font: 12px/1 Helvetica, Tahoma, Arial, \5b8b\4f53, sans-serif; }
p { line-height: 1.5; }

欢迎讨论。

测试页面：line-height.html

历时一年多一点点，写满100篇，截图留个念：

body,
button, input, select, textarea {
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
}

“\5b8b\4f53″ 就是 “宋体”。用 unicode 表示，不用 SimSun, 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法。普及点字体知识：

字体的别名

系统中的一个字体是允许有多种别名形式存在的。比如，在 Windows 下，Georgia 也可以用 Georgia MS 来命名，它们其实是同一种字体。宋体的正式名称是 SimSun，而“宋体”只是它的别名。

按照规范，浏览器应该能自动识别字体的别名，并映射到正确的字体文件。比如，font-famliy: SimSun和font-family: "宋体"应该具有等价的效果。可惜，似乎很多浏览器都不能正确执行前一条定义……

详细请参考：谈谈网页设计中的字体应用 (4) 实战应用篇

因此，考虑浏览器兼容，我们需要用“宋体”，转码成 unicode 形式则可以保证在任何编码下都无问题。

最后，针对 Dawn CSS Reset 中提出的差异点，说下我的想法：

1. h1 – h6, 各个浏览器下的 font-size 有差异，统一一下，我觉得还是有好处的，特别是 h3 和 h4.
2. list-style 放在 ul ol 上，是遵守最小影响原则。li 会继承 ul ol 的 list-style.
3. acronym 表示首字母缩略词，是 abbr 的一种。目前还是有使用的场合，等 HTML5 正式流行后，再去掉不迟。tt 也如此。
4. pre 的 monospace, 从语义上讲，的确不大妥当。但大部分使用场合，pre 的内容都是希望等宽的。某种程度上，等宽才能让 pre 真正实现 pre format.
5. a 去掉了下划线，是因为考虑中文。除了搜狐、新浪这种老旧站点，目前大部分中文站点，链接默认都不会加下划线。这是一种中国特色，同时也是一种国际化趋势。加下划线的链接，越来越多的用来表示强调或某种视觉效果，比如 WordPress 的后台。
6. 滚动条的问题，已去除。放在 reset 里，的确不妥当。
7. 另：ie7- 下，hr 有默认色，这次更新加上了：hr { *color: #fff; }（理想情况下，应该设为 transparent, 可惜不行）. 讨厌的 ie -.-

更新后的 KISSY Reset CSS: reset.css

回顾与反思

第一份 reset css 是 Tantek 的 undohtml.css, 很简单的代码，Tantek 根据自己的需要，对浏览器的默认样式进行了一些重置。

Eric 的也是如此。

YUI 除了 cssreset, 还配套有 cssfonts 和 cssbase. cssreset 清除默认样式，cssfonts 和 cssbase 则将一些元素的默认样式重设回来。

很长一段时间，* { margin: 0; padding: 0; }和 YUI cssreset 模糊了我对 reset 的理解，让我认为 reset 就应该清除掉所有样式，将一切归零。

后来阅读 Eric 的博客，发现 Eric 并不期望大家下载他的 reset.css 后直接拿去用。而是期待能根据具体需求，适量裁剪和修改后再使用。

世间的事总会有些戏剧化，Eric 的期待没有如意。大家都想得到通用解决方案，期待银弹。在这种渴求下，YUI cssreset 很彻底很干净，广为流传。

更戏剧化的是，由于 YUI 的 cssfonts 和 cssbase 只考虑了西欧文字，对汉字的考虑不多。这导致国内用户大部分只会用 cssreset. 比喻成武林秘籍的话，我们一直在用残卷。

调节显示器，有一个“重置为出厂设置”的选项。这有两重含义：一是去掉当前的设置，二是还原为出厂时的设置。CSS Reset 也一样，第一步是清除浏览器的默认样式，第二步是重设浏览器的默认样式。很明显，* { margin: 0; padding: 0; }和 YUI cssreset 偏向于第一步。

这两步并不是截然分开的。reset 的初始意图，是想减少各种浏览器下默认样式的差异。对于没有差异的默认样式，则可以根据情况，选择性重置或不重置。比如 strong, 默认都是粗体，这符合预期，就可以不重置。又比如 a, 现在的主流浏览器下默认样式无差别，但为了某些因素，比如可读性，也会考虑将下划线重置为无。

以上，是回顾，是反思，是接下来技术实现的指导思想。

技术实现

天下一大抄，抄来抄去，种种 reset 代码，长得都差不离。这没什么不好，不光解决了问题，还促进了技术传播。

但从 2004 年到现在，已经一晃眼 5 年了。曾经的一些考虑，比如针对 ie 5.5 的代码，目前已经可以大胆舍弃了。抄的过程中，努力去做到求实求证，努力求一份自己的理解，很难很难。但只要孜孜不倦，终究会有所获，有所得，有所悟。

这是我和好友正淳一起整理的一份 reset.css:

/*
KISSY CSS Reset
理念：清除和重置是紧密不可分的
特色：1.适应中文 2.基于最新主流浏览器
维护：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*/

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}

/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
	border-bottom: 1px dotted;
	cursor: help;
}

q:before, q:after { content: ''; }

/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }

用途在注释里都标明了，就不多解释。测试页面在这里：CSS Reset Test. 这份测试页面花了我们很大心血，如果转载，请注明下出处，呵呵。

先说明下测试过的浏览器：IE 6+, Firefox 3.5+, Safari 4+, Chrome 2+, Opera 10+

下面解释一些和 YUI cssreset 的差异点：

1. 清除内外边距的元素，去掉了 div, code（在测试浏览器中，没发现有边距）, 增加了 button（感觉是 YUI 遗漏了）.
2. 去掉了 YUI 里对 html 颜色和背景色的设置。在测试浏览器中，没有发现差异。（要设的话，推荐background: transparent）
3. 对于 address, caption, …, em, strong 等文本格式元素，做了调整。保留了 strong 和 th 的粗体。
4. 对 abbr 和 acronym 做了调整，使得在非 ie6 下可视性更好。
5. 去掉了 sup 和 sub 的样式，直接用浏览器默认的即可。
6. 对于 input, select, textarea 表单元素，去掉了针对 ie 的 inherit, 只保留了 font-size 的 inherit hack. 因为其它 hack 经测试已失效。
7. 增加了一些元素的默认样式。

此外，对整体代码的组织形式做了调整，按照元素的类别将代码进行了分组。

如何使用

请记住：永远不存在万能解决方案，永远没有银弹。

因此我的建议和 Eric 是一样的：请根据具体需求，适量裁剪和修改后再使用。

比如针对淘宝，可以在 reset.css 的基础上，修改为 reset-taobao.css.

如果是个人博客，我个人喜欢的一个方案是：reset-blog.css.

相关测试页面请查看：cssreset svn.
真实使用时，请用压缩后的版本：reset-min.css.

对于 reset.css 本身，我们期待它能尽量多的适用于各种场景，但不期待它能解决所有问题。目前而言，reset.css 里的默认样式，是我和正淳等各位同事和朋友们实践经验的总结，算是“精挑细选”，但不期待能解决所有问题。

最后，期待你的参与和建议。如果这份 reset.css 能有幸在你的项目中得到使用，则非常期待你的反馈。

.test {
    background-color: black; /* firefox, opera, ie8 */
    [;background-color: green;] /* safari, chrome */
    *background-color: blue; /* ie7 */
     _background-color: red; /* ie6 */
}
html*~/**/body .test {
    border: 5px solid red; /* ie8 */
}

随着浏览器的更新换代，CSS Hack 变得越来越诡异和不可靠了-.-

相对来说，IE 的条件注释是值得信赖的：

<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->>
<!--[if !IE]>--><body><!--<![endif]-->

<style type="text/css">
    body.ie6 .test { background-color: blue }
    body.ie7 .test { background-color: red }
    body.ie8 .test { background-color: green }
</style>

注意，上面的代码虽然也是 hack，但大大简化和规范了 css hack 的写法。

最近看 ExtCore 3.0 的代码，发现 Ext 初始化时会自动给 body 添加浏览器信息：

//Initialize doc classes
(function(){

    var initExtCss = function(){
        // find the body element
        var bd = document.body || document.getElementsByTagName('body')[0];
        if(!bd){ return false; }
        var cls = [' ',
                Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8'))
                : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')
                : Ext.isOpera ? "ext-opera"
                : Ext.isWebKit ? "ext-webkit" : ""];

        if(Ext.isSafari){
            cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4')));
        }else if(Ext.isChrome){
            cls.push("ext-chrome");
        }

        if(Ext.isMac){
            cls.push("ext-mac");
        }
        if(Ext.isLinux){
            cls.push("ext-linux");
        }
        if(Ext.isBorderBox){
            cls.push('ext-border-box');
        }
        if(Ext.isStrict){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
            var p = bd.parentNode;
            if(p){
                p.className += ' ext-strict';
            }
        }
        bd.className += cls.join(' ');
        return true;
    }

    if(!initExtCss()){
        Ext.onReady(initExtCss);
    }
})();

比如在 IE8 下，会添加以下信息：

将浏览器信息添加到 body 和 html 上后，我们书写 CSS Hack 就会变得很容易了。

通过 JS 添加浏览器信息，需要将 JS 放在头部执行，以确保渲染前就添加好。另外，对于不支持 JS 的用户代理，此方法无效。

还有一个方案是在服务器端处理，比如 browscap 方案。优点的是没有 JS 方案的缺点，缺点是遇上 proxy cache 就不准确了。

个人觉得 JS 方案可行。因为禁用 JS 的浏览器用户，自身已是高手，不用我们担心。对于不支持 JS 的用户代理，比如手机等浏览器，则有对应的 WAP 版本给用户使用。这样，我们可以：

1. 在 head 部分加载一个非常小巧精简的 js，该 js 在 body 可用时，能立刻给 body 添加浏览器信息。
2. 在 css 里，通过body.ie6 .test { ... }来书写 css hack

这样，无论浏览器如何更新换代，我们都不必去记忆或发掘那一堆诡异的 css hack 的写法了。

现象

测试页面：ie_hasLayout_width_bug.html

正常情况下，没有设定宽度的浮动容器test-wrap，当包含的block元素test-box也没有设定宽度时，test-box的宽度会和test-wrap保持一致：

其中test-wrap的宽度取决于所包含的子元素的最大宽度。

但在IE7下，test-box的宽度塌缩到最小了：

IE6下，test-box的宽度则扩展到和浏览器窗口一样宽：

分析

上面的测试页面，只给出了容器浮动时的场景。实际上，绝对定位的容器也有此问题。浮动和绝对定位有个共同点，就是让元素脱离了文档流。如果没有脱离文档流，比如相当定位，则无此bug。

对于脱离文档流的容器，当容器没有设定宽度时，其宽度会尽量小，取决于容器内子节点的最大宽度。
对于该容器内的block元素，当没有设定宽度时，正常情况下，其宽度会自动和容器的宽度保持一致。

注意测试页面中的第4种情景，当不给test-box设定高宽，保持无hasLayout时，test-box的宽度在IE6和IE7下都是正确的。

第1种情景，给test-box设定了高度，实际上是触发了test-box的hasLayout. 这是引发IE6和IE7下bug的本因。IE7的处理方式是，将容器内有hasLayout的block元素，也塌缩到宽度最小。IE6的处理方式则是，一旦容器内的block元素有了hasLayout，就会无视容器的限制，其宽度会直接越级与document.body保持一致，太不尊重领导了-.-

第2种和第3种情景，给test-wrap设定了宽度。一旦设定了宽度，IE7乖乖的都ok了。恼人的是，当给容器设定的宽度容纳不了里面的block元素时，IE6依旧非常不尊重领导，直接将领导的办公室扩建了。

总结成一句话：当脱离文档流的容器没设定宽度时，在IE7下，容器内触发了hasLayout但没设定宽度的block元素，会很谦虚的缩在一角；而在IE6下，容器内的元素一旦有了hasLayout，就会不尊重领导，直接越级与领导的领导保持一致；即便设定了宽度，也会将直属领导的办公室扩建。

解决方法

知道了缘由，解决方法很自然就能想到：

• 方法一：给容器设定宽度，并且宽度值能包容所有block子元素，以防止IE6扩建。
• 方法二：给容器内的子元素设定宽度，让它们自己管好自己，不给领导找麻烦。
• 方法三：当容器内的元素宽度都未知时，通过js去动态计算子元素的最大宽度。算好后，赋值给容器。比如用 Ext.util.TextMetrics 就能干这事。

10. IE6下的背景闪烁bug

这个bug久闻其名，但我自己从来没遇到过。纳闷了许久，后来才发现，这是一个非典型性甚至可以忽略的bug. 因为它的触发条件离普通用户很远：

The cause of flickering is choosing “Every visit to page” in Tools » Internet Options… » Temporary Internet Files » Settings…

Selecting anything other than “Every visit to page” will fix all flickering. Fortunately, the means that the flicker problem plagues developers far more than your common user.

只有IE的缓存选项设置为“Every visit to page”时，才会触发。普通用户的默认设置是“Automatically”, 不会遇到此问题。因此继续往下阅读之前，请确保IE6的缓存设置为“Every visit to page”, 否则你将看不到神奇的现象。

测试：test_11.html

<style type="text/css">
    a { background: #f00 url(square.gif) }
</style>
<a href="#">test link</a>

上面的代码平淡无奇，但在IE6下，当鼠标划过test link时，背景会瞬间变红。如果你看不到此现象，请用老虎钳将网线剪掉一半，降低网速后再测试。

除了给链接A设置背景色，还有一些其它触发条件，详细资料请参阅：Minimize Flickering CSS Background Images in IE6.

注意：只有IE6下，设置“Every visit to page”, 并且给元素A设置了背景色等条件下，才会触发此bug. 上面引用的文章中提到三种解决办法：1. 调整服务器的配置，2. 双缓冲背景，3. js解决办法：

try {document.execCommand("BackgroundImageCache", false, true);}catch(e){};

到此，似乎已经尘埃落定。但是，好奇虽然害死猫，却也能发现猫世界里的更多秘密：

上图是用Fiddler监控鼠标在链接A上移进移出时的HTTP请求。虽然请求的结果是304（Not modified），但从发送请求到服务器返回304，依旧是需要时间的。在这个时间差里，链接A的背景是红色的，而不是图片。多余的HTTP请求才是背景闪烁的真正原因。

明白了这一点，可以看出“双缓冲背景”法，是治标不治本，是视觉上的小hack，并没有减少无谓的HTTP请求。采用调整服务器配置或execCommand hack，才能彻底杜绝多余的HTTP请求。

微软很委婉在一个hotfix中提到这个bug：Available memory decreases when you view a Web page in Internet Explorer 6 Service Pack 1. 当script中频繁改变一个设置了背景图的按钮的背景色时，会造成IE内存泄漏。微软的文档太文档了，Resolution那一段，我反复读了好几次，才明白微软要表达什么意思，囧。

鉴于目前很多公司的图片服务器配置里已经自动fix了此bug，以及IE6的逐步淡出，还有触发条件离普通用户较远，我们可以逐步忘掉此bug了，就像我们逐步淡忘掉ie 5.5的很多css hack一样。

休息一下，上面只是引子，精彩内容在下面。

11. 切换class时，背景图的请求

链接的hover状态切换, 是class切换一个特例。更一般性的测试如下：

<style type="text/css">
    .test1 { background: url(1.jpg) }
    .test2 { background: url(2.jpg) }
</style>
<div class="test1" id="J_Test">test</div>
<a href="#" id="J_Link">切换className</a>
<script type="text/javascript">
    document.getElementById('J_Link').onclick = function() {
        var el = document.getElementById('J_Test');
        el.className = (el.className == 'test1') ? 'test2' : 'test1';
        return true;
    };
</script>

测试：test_10.html

结论：当快速点击“切换className”时，除了IE，其它浏览器都只会产生两次请求。但在IE（包括IE8）中，用Fiddler能捕捉到如下请求：

带红色停止标志的，是Aborted Session. 也就是说，在IE下，当一张图片未下载完成时，如果class就已经切换，正在下载的图片会被中止掉。被中止掉的图片，下次用到时，会再次发送请求。直到图片成功下载后，切换class时才不会再次请求图片。

注意：如果你的观察结果和上面的结论有异，请检查 Internet Options… » Temporary Internet Files » Settings… 没有选中”Every visit to page”, 以及Fiddler中没有禁用Cache. 否则图片下载完成后，依旧会重新发送请求。如果观察不到请求，请清空IE缓存后再测试。另外，一定要记得用老虎钳剪掉一半网线。

可以看出，即便在IE8下，当网速较慢时，快速切换某个元素的class，依旧会造成闪烁。要一直到背景图片下载完成后，才不会闪烁。

知道了问题所在，解决办法就很容易想到了：采用Sprite技术，切换class时只改变background-position.
测试：test_10b.html
注意：用Sprite合成一张图片后，你点得再快，IE也始终只发送一个图片请求。

很想结束本文了，无奈IE下还有一个更诡异的闪烁现象… Come on~

12. 神秘的闪烁

直奔测试页面：test_12.html

第一行星星，当鼠标每次悬浮上去，都会产生一个图片请求：

原来老怀疑JS写法有问题，琢磨了许久，才注意到上图中Caching栏的值：public Expires: Sat, May 2009 04:59:57 GMT. 超级汗googlepages的设置。

再来看第二行星星，悬浮时，没有第一行星星的问题。从Fiddler中可以看出，第二行星星的背景文件也是过期的，为什么却不重新下载呢？

相信你已经留意到测试页面左下角那颗孤零零的星星，这就是第二行星星正常的救星。

根据上面的现象，我们可以猜测IE请求图片的虚拟过程为：

1. 需求：改变classA, 需要背景图imgA.
2. 在页面中寻找是否已经有元素使用imgA, 有的话，直接共用。
3. 在缓存中找到了imgA，判断Expire头，如果过期了，则重新发送请求，全新下载。
4. 如果Expire头没过期，直接复用。
5. 在缓存中没找到，发送请求，从服务上下载。

其中第3点，IE的处理方式比其它浏览器严格，其它浏览器在刚才的测试页面中，不会重新下载。

另外，前面已经总结过，当切换到classA，开始下载imgA后，当classA又没用了时，IE会中断imgA的下载，而其它浏览器则会一直下载完。从逻辑上讲，IE的处理方式很严谨。但实际体验上，IE的处理方法很恼火。好与坏，有时真难评说。

后记

上面的结论，都仅仅是“定律”，建立在黑盒测试的基础上。可能会有不少错误之处，如果发现了，还望各位能及时反馈给我。