禁用新版Firefox自带的元素查看器的方法很简单（图4）：

1. 在地址栏输入 about:config，回车
2. 提示“这样可能会失去质保”，点击“我保证会小心”
3. 进入Firefox配置界面后，可以在搜索框中输入 inspector ，过滤无关的项目
4. 双击“devtools.inspector.enabled”，使其值变为“false”。

图1：firebox内置的元素查看器，可以查看HTML、CSS

图2：功能更强大、更易用的Firebug界面

图3：右键菜单里多出一个查看元素，经常会点错

图4：通过about:config高级配置，可以轻松禁用Firefox自带的元素查看器

相关日志

• 2011-03-07 -- IE8/9兼容性设置
• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-12 -- 自适应的多列图文混排改进
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug
• 2010-10-10 -- 卸载360安全卫士造成网络异常问题解决方案
• 2009-06-20 -- 工行U盾在Windows 7 x64版下的使用
• 2009-06-17 -- Dreamweaver中的正则表达式
• 2009-05-23 -- windows 7 x64 上的Google Chrome

CssGaga功能特性

1. 合并import的CSS文件，开发阶段将CSS文件按模块拆分复用，发布上线后合并减少HTTP请求；
2. 优化、压缩CSS代码，减少带宽占用，加快下载速度；
3. 优化、发布CSS中使用到的图片，可以不必考虑多发、漏发图片文件的情况；
4. 自动应用CSS Sprite技术，开发阶段不用考虑图标合并，便于管理，发布后的多个图标自动合并为一个图片，并自动更新CSS代码处理背景定位；
5. 对CSS代码中使用到的图片自动加时间戳，以便在使用长Cache与更新后的图片及时生效；
6. 样式有多套配色风格时，通过CssGaga可以实现皮肤的自动化同步；
7. CSS样式、图片一键去色功能，在遇到特殊政治任务的时候，全站能迅速进行去色改版，迅速恢复；
8. 生成iOS设备所需的不同尺寸Icon文件；
9. 处理一些浏览器兼容方面的问题；

CssGaga下载和配置

运行CssGaga需要Windows操作系统、.Net Framework运行环境。

1. 下载并安装Microsoft .NET Framework 4.0
2. 下载并解压CssGaga最新版（绿色软件，不用安装）
3. 对CssGaga进行初始化配置

第一次运行CssGaga前，需要对其进行必要的配置。主要是指定CssGaga的编译目标路径、站点的基本URL。具体步骤：

打开CssGaga所在目录，复制CssGaga.exe.config.sample文件，重命名为CssGaga.exe.config。

用任意文本编辑器打开CssGaga.exe.config，默认的代码如下：

<?xml version="1.0"?>
<configuration>
  <appSettings>
    <add key="pathSource" value="E:\" />
    <add key="webSiteUrl" value="http://qzonestyle.gtimg.cn" />
    <add key="pathReport" value="/usr/local/imgcache/htdocs" />
    <add key="pathDest1Name" value="目标环境1" />
    <add key="pathDest1" value="E:\output" />
    <add key="pathReport1" value="/usr/local/imgcache/htdocs" />
    <add key="chkTemp" value="1" />
  </appSettings>
</configuration>

其中pathDest1Name、pathDest1、pathReport1三个节点为一组，代表一个编译目标，CssGaga支持多组编译目标，要增加新的编译目标，只要复制粘贴这三个节点，修改“1”为“2”及更大的数字，相同数字为一组。例如，我设定本机的一个目录为编译目标：

<add key="pathDest1Name" value="本机输出" />
<add key="pathDest1" value="D:\ofcss\style" />
<add key="pathReport1" value="/style" />

pathDest1Name代表这个目标在CssGaga界面上显示的名称，pathDest1代表这个目标的真实物理路径，pathReport1代表这个路径编译机上的地址（不使用SMB共享进行文件部署的话，这个节点设置不设置就无所谓了，可以考虑设置为你站点上该目录的相对路径）。

上面的设定表示当我在CssGaga上勾选“本机输出”时，编译后的CSS文件和图片文件会生成到D:\ofcss\style目录下。

CssGaga开发约定

根据互联网上一些优秀团队的经验以及我们自己在工作中的经验，CssGaga建议使用者在进行重构时遵循以下约定：

1. 目录结构

• 把所有的CSS文件放在同一个目录下。网页中用link标签引用的CSS文件，我们称之为CSS桥文件（CSS Bridge），真正的样式规则代码按照模块拆分存放在不同的CSS文件中，这些CSS文件以“.import.css”结尾，代表它们不能直接被页面引用，而要在桥文件中通过@import指令导入。
• 把所有的图片文件放在CSS文件所在目录下的子目录（例如img）中。
• 把所有需要进行CSS Sprite合并的图标文件放在CSS文件所在目录下的slice子目录中。
• 把所有自定义鼠标样式（.ani、.cur）放在CSS文件所在目录下的absolute子目录中。例如：

2.代码编写

• 在CSS Bridge文件中，用@import指令，把页面用到的模块css组合到一起
• 在编写需要做CSS Sprite合并的背景图片样式时，不要缩写，必须把background-image样式单独写，并且不写background-position属性（因为这些图标在开发阶段并没有合并，也就不需要定位，合并之后的background-position会由CssGaga自动生成），如果有PNG Alpha透明的图片，需要针对IE6单独做一张PNG 索引色透明图片时，可以用_background-image做Hack，CssGaga在合并时，会单独为IE6合并一张图片。
• @import指令不要嵌套使用（A import B，则B不要再import其它文件），原则上不要import其它目录的文件（CssGaga不会做合并处理）。

3. 编译发布

在重构完成后，运行CssGaga，选择开发目录（注意与生成目标路径对应，比如开发路径是E:\ofcss\dev，目标路径是E:\ofcss\output，那么E:\ofcss\dev\style\index.css就会编译到E:\ofcss\output\style\index.css），勾选需要使用的功能，选择编译目标。然后把需要发布的CSS文件拖入CssGaga的主窗口，就会自动处理并编译到目标路径（相关的图片文件自动复制），如图：

有关CssGaga更多功能介绍和使用技巧，参见：CssGaga帮助索引

相关日志

• 2011-05-26 -- 深入解析CSS样式层叠权重值
• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-14 -- 对《优化浏览器渲染》的补充【译】
• 2011-03-12 -- 自适应的多列图文混排改进
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2011-03-04 -- 在非IE浏览器中模拟zoom创建块级上下文【译】
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2010-06-09 -- 最近的书单

我是把代码封装到自己的一个工具类KRUtils里作为类方法，使用起来也很方便。代码如下：

/* dateDiff 方法实现 */ +(NSDateComponents *) dateDiff:(NSDate *) fromDate toDate:(NSDate *) toDate
{
    NSCalendar *sysCalendar = [NSCalendar currentCalendar];
    unsigned int unitFlags = NSYearCalendarUnit | NSMonthCalendarUnit |
                              NSDayCalendarUnit | NSHourCalendarUnit |
                              NSMinuteCalendarUnit | NSSecondCalendarUnit;
    NSDateComponents *compInfo = [sysCalendar components:unitFlags
                                              fromDate:fromDate
                                              toDate:toDate
                                              options:0];
    return compInfo;
}

/* dateDiff 调用示例 */ -(void) demo
{
    NSDate *date1 = [[NSDate alloc] init];
    NSDate *date2 = [[NSDate alloc] initWithTimeIntervalSinceNow:86400];

    NSDateComponents *diffInfo =[KRUtils dateDiff:date1 toDate:date2];
    NSLog(@"相差 %d天%02d小时%02d分钟%02d秒", [diffInfo day],
                                              [diffInfo hour],
                                              [diffInfo minute],
                                              [diffInfo second]);
    //输出结果：“相差 1天00小时00分钟00秒” }

随机推荐

• 2006-04-19 -- Microsoft SQL Server 2005商务智能初体验
• 2006-03-26 -- XMLHTTP与中文字符编码问题
• 2005-12-15 -- 利用WebService进行网站整合的实现
• 2005-12-12 -- 实践：用Div+CSS重构网页
• 2009-04-05 -- 使用Google AjaxLib API托管的js库
• 2006-01-09 -- 三个男人的戏——张艺谋归来
• 2006-09-19 -- 喝酒，喝酒……
• 2006-04-14 -- 整合后测试是否成功的全部步骤
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug
• 2006-06-04 -- 关于动易子域名问题

待遇：

1. 富有竞争力的薪酬
2. 丰厚年终绩效奖金
3. 茶水间二十四小时供应饮品、休闲娱乐设施
4. 免费宵夜供应
5. 上下班市内多条线路班车接送
6. 每年制订的成长培养计划
7. 一年多次境内外旅游
8. 五险一金
9. 可能会令您不习惯的团队聚餐、腐败

职责

负责腾讯互联网业务系统相关web产品(QQ空间、QQ秀、数字多媒体、QQ会员、拍拍网等)海量平台前端研发；通过技术提升用户体验和可用性；突破web多终端/设备为更多用户群体提供随时随地的线上生活体验；通过无障碍研究/SEO提升产品的口碑和品牌受众…更多的定位等待您来下笔

要求

深刻理解Web标准；精通图像处理及代码编辑工具；精通Web前端跨平台开发技术（XHTML/XML/CSS/Javascript等）；及时了解业界前瞻信息及应用，并有浓厚的兴趣和深入的见解；对HTML5/CSS3方面有实际的理解和实践经验；

对互联网产品性能优化有研究并有相关实践经验；

熟悉搜索引擎优化，有相关的实践经验；

熟悉业界常用Javascript脚本库(如jQuery、YUI、mootools等)；

有团队协作精神，较强的逻辑分析能力、沟通表达能力，善于学习；

勇于探索新领域了解多终端平台(手机，打印机，视障阅读器)研发，对可用性等有实际的理解和实践经验；

对非Web前端脚本的语言（如Java/PHP/CGI）等有所了解，并在实际工作中接触过；

两年以上互联网产品研发经验，海量平台研发经验优先；

有Web Apps开发经验优先；

具备项目驱动力，对此有独特见解并有成功案例优先；

专科或以上学历优先

关于我们：

腾讯互联网用户体验设计部（前身： ISD webteam）

人在腾讯>>

有意向的朋友可以直接发送简历到 kairee#qq.com

随机推荐

• 2006-10-25 -- 动易接口文件及数据同步工具更新
• 2005-12-03 -- Visual Studio 2005体验感受
• 2009-04-13 -- [翻译]ASP.NET MVC动手实验1-3：开发ASP.NET MVC应用
• 2006-05-14 -- 又是结石（三）:百炼成钢久病成医
• 2011-03-20 -- 容易被误解的overflow:hidden
• 2009-04-16 -- 来自微软站点的纯CSS下拉菜单
• 2005-11-18 -- 用ASP为blog程序编写Trackback功能
• 2008-08-31 -- 26岁的时候挺好的
• 2007-06-15 -- 以前的邮件
• 2010-10-29 -- 利用宏避免发送确认邮件时忘记添加附件

根据CSS规范，具体性越明确的样式规则，权重值越高。计算权重值的依据，并不是许多文章所描述的那样“class是10，标签是1，ID是100”之类——虽然这样在大多数情况下能够得到正确的结果。

选择器权重值的计算

A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 对于内联样式，由于没有选择器，所以B、C、D的值都为0，即A=1, B=0, C=0, D=0（简写为1,0,0,0，下同）。

B：计算该选择器中ID的数量。（例如，#header 这样的选择器，计算为0, 1, 0, 0）。

C：计算该选择器中伪类及其它属性的数量（包括class、属性选择器等，不包括伪元素）。 （例如， .logo[id='site-logo'] 这样的选择器，计算为0, 0, 2, 0）。

D：计算该选择器中伪元素及标签的数量。（例如，p:first-letter 这样的选择器，计算为0, 0, 0, 2）。

CSS2规范中给出的一些例子：

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */

h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */

ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */

li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

style=”"          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

根据这样的定义，所以很多文章简单地把规则归纳为：内联样式的权重值是1000，ID选择器的权重值是100，class选择器的权重值是10，标签选择器的权重值是1. 整条规则中的所有选择器权重值相加得到整个样式规则的权重值，数字越大权重值越高。

大多数情况下，按照这样的理解得出的结论没有问题，但是遇到下面这样的情况就出现问题了：

样式一：body header div nav ul li div p a span em {color: red}

样式二：.count {color: blue}

按照错误的计算方法，样式一的权重值是11，样式二的权重值是10，如果这两条规则用于同一个元素，则该元素应该是红色。实际结果却是蓝色。

权重值的比较

按照四组计算的正确方法，上面例子中的样式一权重值应该是0, 0, 0, 11，样式二的权重值是0, 0, 1, 0。

根据规范，计算权重值时，A,B,C,D四组值，从左到右，分组比较，如果A相同，比较B，如果B相同，比较C，如果C相同，比较D，如果D相同，后定义的优先。

样式二和样式一的A、B相同，而样式二的C大于样式一，所以，不管D的值如何，样式二权重值都大于样式一。这就是正确的答案。

特殊的 !important

在按照ABCD四组计算比较之外，在定义样式的时候，还可以对某一个属性应用 !important。对于一直从事编程而没做过重构的人，需要特别注意的是这里的“!”与其在编程语言中的意义刚好相反，不是代表“不重要”而是代表“很重要”。

CSS2规范中规定：!important 用于单独指定某条样式中的单个属性。对于被指定的属性，有 !important 指定的权重值大于所有未用 !important 指定的规则。

例如：

样式一： #header nav ul li.current {color: red; font-weight: bold;}

样式二： li:hover {color: blue !important; font-weight: normal;}

就整条规则而言，样式一的权重值为 0, 1, 1, 3，而样式二的权重值仅为0, 0, 0, 2。所以应用于相同元素时，应该样式一生效。但是对于color这个属性，由于在样式二中用 !important 做了指定，因此color将应用样式二的规则。而font-weight则按照规定用样式一的规则。

如果多条规则中都对同一个属性指定了 !important 呢？这时候 !important 的作用相互抵销，依然按照ABCD四组计算比较。

因此 !important 的作用只有在具有唯一性时才能提现，但是我们永远无法预料自己什么时候又需要覆盖一个已经指定了 !important 的属性，所以最好的办法就是：不要使用 !important。

总结

1. 一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D];
2. A表示内联样式，只有1或者0两个值；
3. B表示规则中ID的数量；
4. C表示规则中除了ID、标签和伪元素以外的其它选择器数量；
5. D表示规则中标签和伪元素的数量；
6. 比较时从高位到低位（从A到D）分别比较，高位相同才需要比较低位；
7. 有 !important 标记的属性权重值无视没用 !important 指定的一切情况；
8. 多次指定 !important 时，相互抵销。

相关日志

• 2012-03-22 -- CssGaga 快速上手指南
• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-14 -- 对《优化浏览器渲染》的补充【译】
• 2011-03-12 -- 自适应的多列图文混排改进
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2011-03-04 -- 在非IE浏览器中模拟zoom创建块级上下文【译】
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2010-06-09 -- 最近的书单

overflow:hidden并不隐藏所有溢出的子元素

对于overflow:hidden的最大误解时：当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时，其内部的任何溢出的内容都将被剪裁（隐藏）。 但事实确实如此吗？答案是“未必”！事实是拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏，具体来说，需要同时满足以下条件：

1. 拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式；
2. 内部溢出的元素是通过position:absolute绝对定位；

如果你只关心结论，那么记住这两点就够了。我这里有个demo，结构如下：

<div class="position">
    <h2>position box</h2>
    <div class="overflow">
        <h3>overflow box</h3>
        <div class="static">
            <p>This is static child element. This is static child element. This is static child element. This is static child element.<p>
            <p>This is static child element. This is static child element. This is static child element. This is static child element.<p>
        </div>
        <div class="absolute">This is absolute child element. This is absolute child element. This is absolute child element. This is absolute child element.</div>
    </div>
</div>

我简单截几个图给懒得打开demo的童鞋看一下：

在demo中，你可以看到绝对定位的元素被定位到了overflow:hidden的父元素之外，但是它依然被显示了。而普通元素在水平方向上的溢出被隐藏，垂直方向上撑开父元素。也就是说，普通元素的表现符合我们的预期，而绝对定位元素并不如很多人想当然的那样被隐藏。

理论依据

那么，这个原理到底是什么呢？当然是css2.1规范。在规范中关于overflow的描述中我们可以找到这样一段话：

This property specifies whether content of a block container element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

简单翻译一下：此属性(overflow)规定，当一个块元素容器的内容溢出元素的盒模型边界时是否对其进行剪裁。它（此属性）影响被应用元素的所有内容的剪裁。但如果后代元素的包含块是整个视区（通常指浏览器内容可视区域，可以理解为body元素）或者是该容器（定义了overflow的元素）的父级元素时，则不受影响。

即使是我重新整理过的语言，还是感觉有点绕。不过在这段话里，出现了一个重要的名词“包含块”（containing block）。包含块是什么呢？这个大家其实比较熟悉，一个绝对定位的元素，其包含块是最近的拥有relative或者absolute定位属性的祖先元素，如果任何一级祖先元素都不符合，则其包含块是body元素。

这就说明，一个绝对定位的元素是否被overflow:hidden隐藏，要看其包含块相对于overflow:hidden的位置来决定。这就好比驻日美军，他们不受日本的法律约束而受美国军法约束。因为他们的“包含块”是美国军方而不是日本法院。

实际上在css2.1规范的11.1节，还有更明确的说明：

A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block。

翻译：

一个绝对定位的后代块元素，部分位于容器之外。这样的元素是否剪裁并不总是取决于定义了overflow属性的祖先容器；尤其是不会被位于他们自身和他们的包含块之间的祖先容器的overflow属性剪裁。

回到我的demo，overflow的元素位于相对定位的元素与绝对定位元素之间，因此根据规定它不能剪裁绝对定位的子元素。也就是说爷爷相对定位，老爸规定溢出隐藏，可是儿子是绝对定位元素。这时候儿子是否隐藏由爷爷决定，而不是老爸。

应用场景

明白了这个理论，对我们的工作有什么指导意义呢？

首先，我们知道overflow:hidden并不是万能的，要想彻底剪裁它的所有子元素，它不但要有overflow:hidden，而且还要作为所有子元素的包含块。这样万一某一天你看到overflow:hidden里面的东东居然被显示出来了，你才知道是为什么。

其次，如果我们先定义了overflow:hidden防止容器被撑开，或者用这个方法做了神马图文混排、清除浮动之类的处理，甚至是用了overflow:hidden来实现块级上下文这样上流的东东，突然产品又说里面的一个浮层要显示，要在右边，要在右上角，要在左边两个栏宽外面……那么你就知道要怎么搞了。

在oocss中，对模块的定义充分利用了这个特性。oocss的模块基本结构如下：

<div class="mod">
    <div class="inner">
        <div class="hd"></div>
        <div class="bd"></div>
        <div class="ft"></div>
    </div>
</div>

他们就对inner应用了position:relative，对bd应用了overflow:hidden和_zoom:1。有兴趣的童靴可以研究一下。

相关日志

• 2011-03-12 -- 自适应的多列图文混排改进
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2012-03-30 -- 禁用Firefox自带的元素查看工具
• 2012-03-22 -- CssGaga 快速上手指南
• 2011-05-26 -- 深入解析CSS样式层叠权重值
• 2011-03-14 -- 对《优化浏览器渲染》的补充【译】
• 2011-03-07 -- IE8/9兼容性设置
• 2011-03-04 -- 在非IE浏览器中模拟zoom创建块级上下文【译】
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug

google这篇文章关注的是资源被下载到客户端以后，在浏览器加载、解释、渲染HTML、CSS和JavaScript阶段的性能优化，提出了5个要点：

1. 使用高效率的CSS选择器
2. 避免CSS expressions
3. 将样式表放在页面顶部
4. 指定图像尺寸
5. 尽早指定文档的字符编码

前四点大布同学已经翻译过了，没拜读过的同学可以点击上面的链接到涛哥的博客学习，第五点的翻译如下：

概述

为HTML文档尽早指定字符编码，可以让浏览器立刻开始执行脚本。

细节

HTML文档是作为带有字符编码信息的字节流序列在互联网中传送的。字符编码信息可以在随文档发送的HTTP响应头信息中指定，也可以在文档的HTML标签中指定。浏览器根据字符编码信息将字节流转换为显示在浏览器上的字符。如果不知道如何构造一个页面的字符，浏览器自然也不能正确地渲染页面。绝大部分浏览器在开始执行任何JavaScript代码或者绘制页面之前都要缓冲一定数量的字节流，缓冲的同时它们也要查找相关的字符编码设定（一个值得注意的例外是IE6/7/8）。

不同浏览器需要缓冲的字节流数量不同，另外如果找不到编码设定，各浏览器默认的编码也不同。但是不管哪一种浏览器，如果在已经缓冲了足够的字节流、开始渲染页面之后才发现指定的编码设定与其默认值不同，都会导致重新解析文档并重绘页面。如果编码的变化影响到了外部资源（例如css\js\media），浏览器甚至会重新对资源进行请求。

为了避免这些延迟，对任何超过1k（精确地说是1024字节，这是我们测试过的所有浏览器的最大缓冲限制）的HTML文档，要尽早指定字符编码。

建议

通过HTTP头信息或meta标签指定编码

为HTML文档指定编码设定有几种方式：

服务器端：通过web服务器的配置来指定编码参数，为所有text/html类型的文档指定带有正确编码信息的Content-Type头信息。例如 Content-Type: text/html;charset=UTF-8

客户端：在HTML代码中包含http-equiv="content-type"的meta标签，并指定字符编码。例如 。

如果可能的话，为你的web服务器做指定字符编码的HTTP头信息配置。某些浏览器（例如Firefox）在执行JavaScript之前会用（比其它浏览器）更短的延迟缓冲来检查头信息中是否指定字符编码。这意味着它们可以跳过对HTML标签的检查，缩短缓冲的字节数和延迟时间。

把meta标签放在head区域的最前面

如果你不能对web服务器配置进行修改，又需要通过meta标签指定编码，要确保你用于指定编码的meta标签是文档中head标签的第一个子元素。浏览器会在文档的前1024字节中寻找字符编码参数，因此为了避免性能损耗，编码参数在文档头部越早出现越好（译注：在IE6以下的版本中，特定情况下，如果该meta标签不是head的第一个子元素，则会被忽略。具体触发情况尚未进行仔细测试，初步估计是与web服务器配置的默认编码或浏览器默认编码有关）。

始终指定文档类型

在浏览器开始检查字符编码设定前，它们必须先检测将被处理的文档是什么类型。如果没有在头信息或meta标签中指定文档类型（content-type），浏览器就会通过很复杂的算法去“嗅探”文档的类型。这个过程会造成额外的延迟，而且还会带来安全漏洞。

务必指定正确的字符编码

你在HTTP头信息或meta标签中指定的字符编码设置一定要和编辑HTML文档时的实际字符编码一致，这非常重要。另外，如果同时通过HTTP头信息和Meta标签两种方式指定了字符编码，它们一定要保持一致。否则浏览器发现两者相互矛盾，会造成页面渲染错误或者为了重绘页面而造成额外的延迟。有关这一点，你可以阅读HTML 4.01规范（英文）中的5.2节：字符编码（英文）。

扩展阅读

如果需要进一步了解content-type以及字符编码设定存在/缺少的不同情况下浏览器行为的细节，可以参阅以下资料（英文）：

• Page Speed wiki
• Browser Performance Issues with Charsets
• Performance Implications of "charset"

相关日志

• 2010-06-09 -- 最近的书单
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-22 -- HTML验证的价值探讨【译】
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2009-12-21 -- 前台开发从头说起：理解css盒模型
• 2009-12-16 -- 前台开发从头说起：谈谈CSS选择符
• 2009-12-15 -- 前台开发从头说起：关于web标准化
• 2009-04-13 -- 简单、通用的JQuery Tab实现

开始之前，首先来看一下我们的需求：

1. 一个通用的结构，可以放在不同宽度的布局列中；
2. 该结构基本构成为左图（头像）右文（多种结构），左右宽度均不固定；
3. 左栏宽度由内容最小宽度确定，右栏无论内容多少要占满容器剩余宽度；
4. 右栏可能有定位元素超出自身范围，要予以显示，且右栏的内容不能环绕左栏；
5. 右栏中可能会再包含浮动，因此右栏需要清除自身内容的浮动。

实际上针对类似需求，网上也有不少方案，建议参考阅读这篇长文以及涛哥简练实用的自适应的图文混排。根据需求，我们能确定出最基本的结构：

<div class="img-txt">
    <div class="img">左图</div>
    <div class="txt">右文</div>
</div>

安装两列布局的传统做法，我们可以想到两列都浮动、左栏浮动+右栏左边距以及负边距等很多方案。但是再对比一下需求，右栏的特性否决了两栏都浮动的方式，左栏的宽度不固定否定了负边距的方式。左栏浮动加右栏左边距将会遭遇webkit核心浏览器的BFC元素边距bug。

所以我们只能选择左栏浮动（浮动元素宽度最小，内容可以撑开），右栏不浮动（不浮动的block元素默认占满行宽）。但是不浮动的右栏既不能环绕左栏，又不能加左边距。怎么办？理所当然的就该想到BFC元素了。涛哥的方案就是这样出来的。我们在腾讯朋友的项目中已经非常大量地实践了这种方案，效果不错。该方案的核心是右栏通过overflow:hidden来创建一个块级上下文（Block Formatting Context），这样同时满足了右栏宽高自适应和不环绕左栏两个需求，我的方案也是在此之上的一个改进。

既然已经有了经过实践验证的方案，为什么要改进呢？因为我们在实践中也遇到了一些麻烦，那就是右栏中的复杂内容，复杂到会有溢出容器的浮层。但是overflow:hidden的存在迫使我们必须把右栏里的定位元素放到右栏结构之外。虽然能解决问题，但是结构上就不符合逻辑了。

所以我们的需求可以抽象为两点：一、创建块级上下文；二、不能使用overflow:hidden。前几天我翻译了一篇文章在非IE浏览器中模拟zoom创建块级上下文，恰好解决了这个矛盾——在IE中用zoom创建块级上下文，在其它浏览器中模拟IE的zoom创建块级上下文。

回到我们的结构中来说：

• img-txt要清除浮动（否则当右栏高度小于左栏时，img-txt的高度撑不开），关于清除浮动的方式，之前已经给出了改进的方案。
• img要左浮动，img和txt之间的距离只能加在img上（原因之前说了，webkit的bug）。
• txt要创建BFC，要清除浮动（这两个问题在模拟zoom的时候一并解决了）。

有了这些前提，我的方案得来全不费功夫。首先是img-txt容器清除浮动：

.img-txt:before,
.img-txt:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.img-txt:after {clear: both;}
.img-txt {zoom: 1;} 

然后是img的左浮动加右边距（注意IE6的3像素文本慢移bug）：

.img {
    float:left;
    margin-right:10px;
    _margin-right:7px;
} 

然后，txt创建BFC，同时清除自身子元素的浮动：

.txt {
    display:table-cell;
    #zoom:1;
}
.txt:after {
    clear: both;
    display: block;
    visibility: hidden;
    overflow: hidden;
    height: 0 !important;
    line-height: 0;
    font-size: xx-large;
    content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
}

行了。现在这个结构就可以搬到网页上的任意地方去，右栏内部喜欢放文字也好、图文并茂也好、有浮动也好、有定位也好，都能胜任了。现在如果你再看一下示例页面，你应该会更容易理解这些例子了。

感谢涛哥，推荐了如此精彩的几篇文章让我翻译。

相关日志

• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2009-12-21 -- 前台开发从头说起：理解css盒模型
• 2009-12-16 -- 前台开发从头说起：谈谈CSS选择符
• 2009-12-15 -- 前台开发从头说起：关于web标准化
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2009-04-16 -- 来自微软站点的纯CSS下拉菜单
• 2009-04-13 -- 简单、通用的JQuery Tab实现

译文：http://ofcss.com/?p=1078

作者：Thierry Koblentz （雅虎前端工程师）

用css边框实现小三角的技巧现在已经被越来越多的网站所采用，减少图片、减少HTTP请求的低碳设计越来越受欢迎。这次，来自雅虎的前端工程师又给我们带来了一组新的CSS边框设计技巧，原文列出了三种（双色背景导航条、水平排列元素间的点线分隔符、带左右箭头的垂直导航条），实际上除了这三种外，其范例页中还给出了额外的两种（水平分页导航条、垂直分组导航条）。以下是译文：

双色背景

原文并未直接给出IE6/7的处理说明，但是在范例页的样式中包含了IE6/7的Hack，这里我把它们摘出来放在下方，你也可以狠狠点击原文范例页面自行查看。

#menuBar-A {
    display: inline-block;
    text-align: center;
    border: 1px solid #cecece;
}
.child {
    display: inline-block;
    line-height: 0;
    height: 0;
    border-top: 1em solid #ffc;
    border-bottom: 1em solid #fdcf46;
    padding: 0 .6em;
    vertical-align: bottom;
}

<ul id="menuBar-A">
    <li><a href="#">About Us</a></li>
    <li class="selected"><a href="#">Contact Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
</ul>

/*
 * IE6/7 Hacks
 * 用display:inline + zoom来模拟display:inline-block;
 * 基于IE对列表元素的样式渲染方式，不能对其使用垂直边框，因此用它的背景色代替 */
#menuBar-A {
    #display:inline;
    #zoom:1;
    #border:0;
    #padding:1px 0 1px 1px;
    #background:#BD9E43;
}
#menuBar-A li {
    #background:#ffc;
    #border:0;
    #margin-right:1px;
    #border-bottom:1em solid #fdcf46;
}
#menuBar-A a {
    #line-height:1;
    #border:0;
    #position:relative;
    #top:-.65em;
    _top:.3em;
}
#menuBar-A li:hover a {
    #color:#fff;
}
#menuBar-A a:hover,
#menuBar-A a:active {
    _color:#333;
}
#menuBar-A .selected,
#menuBar-A li:hover {
    #background:#c789d9;
    #border-bottom-color:#83358B;
}
#menuBar-A .selected a:hover, {
    #color:#fff;
}

列表元素之间的点/线分隔符

这个例子只需要做少量的IE Hack就可以完美实现跨浏览器兼容。

ul.one, ul.two {
    margin-left: 0;
    display: inline-block;
    #display:inline;
    #zoom:1;
    height:12px;
    line-height:12px;
    padding:0;
}

li {
    float: left;
    display: inline;
    height: 2px;
    line-height: 2px;
    position: relative;
    top: .3em;
}
li.selected {
    font-weight:bold;
}
ul.two {
    border-left: 1px solid #333;
}

ul.one li {
    border-left: 2px solid #333;
}

ul.two li {
    border-right: 2px solid #333;
}

ul.one li.first-child, ul.two li.last-child {
    border: 0;
}

a {
    color: #000;
    padding: .4em .9em;
    #position:relative;
}

<div id="menuBar-B">
    <ul class="one">
        <li class="first-child"><a href="#">About Us</a></li>
        <li class="selected"><a href="#">Contact Us</a></li>
    </ul>
    <ul class="two">
        <li class="last-child"><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
    </ul>
</div>

左右三角图标

原文并未直接给出IE6/7的处理说明，但是在范例页的样式中包含了IE6/7的Hack，这里我把它们摘出来放在下方，你也可以狠狠点击原文范例页面自行查看。

#box {
    line-height: 0;
    height: 0;
    border: .4em solid transparent;
    border-left-color: #333;
    border-right-color: #333;
    padding: 0 .3em;
    display: inline-block;
}

<ul id="menuBar-C">
    <li><a href="#">About Us</a></li>
    <li class="selected"><a href="#">Contact Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
</ul>

/* IE6/7 Hacks */
#menuBar-C {
    #display:inline;
    #zoom:1;
    #width:10em;
}
#menuBar-C li {
    #padding:0;
    #margin:.4em;
    #list-style-type:none;
    #height:0;
    #border-top:.4em solid #fff;
    #border-bottom:.4em solid #fff;
    #border-left:.4em solid #2F2876;
    #border-right:.4em solid #2F2876;
    _position:relative;
}
#menuBar-C a {
    #border:0;
    #height:auto;
    #line-height:1;
    #top:-.4em;
    #position:relative;
    _position:absolute;
    #left:-.4em;
}
#menuBar-C li:hover {
    #border-left:.4em solid #f60;
}

IE6与透明边框

IE6不支持用于边框颜色的“transparent”关键字。如果在IE6下指定边框颜色为透明（transparent），IE6将会绘制成黑色边框。

解决办法是使用 chroma filter，它可以让对象内容中的指定颜色显示为透明色（译者注：针对IE6，还有其它的解决办法，参见IE 6 的边框不透明 bug）。例如，创建一个向右箭头，可以这样做：

#Box {
    height: 0;
    width: 0;
    border: 10px solid transparent;
    font-size: 0;
    _border-color: pink;
    _filter: chroma(color="pink");
    border-left-color: #333;
}

规则中的font-size的定义是为了解决IE6下自动撑开元素高度的问题。

译注：

1. 原文给出的css样式和html结构不对应，在译文中已做修正。
2. 原文作者对IE6/7的注释采用两种方式：*号引导属性名、以及规则最后一个选择符带逗号，在译文中我统一使用了#号引导属性名的方式。为了部分原来不清楚这些hacks方式的读者，下面再把作为本文背景知识的IE6/7、IE6 Hacks符号简单说明一下：
   • IE6/7 均支持以“*”号、“#”号引导的属性名称，其它浏览器不支持。因此，针对IE6/7的Hack可以写为：
     #zoom:1或*zoom:1
   • IE6/7 均支持最后一个选择符后面跟逗号的规则，其它浏览器不支持。因此，针对IE6/7的Hack也可以写为：
     .selector, {zoom:1}
   • IE6 支持以下划线引导的属性名，其它浏览器不支持。因此，针对IE6的Hack可以写为：
     _width:600px;

以上只是用边框实现“无图化”设计的众多技巧中的一小部分，实际上我们还可以做得更多。如果有兴趣，你可以继续阅读：

《自适应圆角》

《CSS Border三角、圆角图形生成技巧》

相关日志

• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-14 -- 对《优化浏览器渲染》的补充【译】
• 2011-03-12 -- 自适应的多列图文混排改进
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2009-06-22 -- Whatever:hover – 无需javascript让IE支持丰富伪类
• 2012-03-30 -- 禁用Firefox自带的元素查看工具
• 2012-03-22 -- CssGaga 快速上手指南
• 2011-05-26 -- 深入解析CSS样式层叠权重值
• 2011-03-07 -- IE8/9兼容性设置

安装完IE8/9，第一次启动时会打开设置向导，设置不设置都可以。设置项中的基本项目说明一下：

• 启用选项卡浏览：这个必定启用，很多人不肯用IE而非要使用TT浏览器、遨游浏览器的主要原因是不用开启多个浏览器窗口，在一个窗口中就可以打开很多网页。实际上从IE7开始已经支持这个特性；
• 启用加速器：这个根据需要，我是全部禁止的，主要包括Bing地图、使用Bing搜索、使用Windows Live发送电子邮件、日志等功能，由于都有更佳的替代品，所以我不使用这些加速器，喜欢Bing的朋友可以启用。
• SmartScreen筛选：针对仿冒网站的改良型保护功能，带有新的反恶意软件功能。原理是通过服务器端的特征对比识别你所访问的网站是否带有恶意软件、是否仿冒的钓鱼网站。我一直是禁用的，不过现在钓鱼网站很猖獗，如果你没办法确保自己能识别钓鱼网站，可以启用。具体效果我并不清楚，因为没有使用过。
• 搜索默认值：默认使用的是Bing搜索引擎，可以自由更改。IE7/8设置网站上的google默认地址是中国大陆谷歌的地址，由于google已经退出中国，每次搜索都会返回“查看xxxx在google.com.hk上的结果”，中转一次才能得到结果。这里可以使用自定义。首先打开google.com，搜索TEST，然后把结果页面的URL作为自定义搜索引擎的URL就可以了。

以上都是基本的设置，对浏览器的兼容性没有影响，下面说一下常用的兼容性设置：

关闭安全模式：

打开“Internet选项 -> 安全”选项卡，取消勾选“启用安全模式”，这是造成IE8/9兼容性问题的主要原因。勾选之后，重新启动IE会在顶部出现安全模式已关闭的提示，点一下可以选择“不再提示”。

自定义级别：

打开“Internet选项 -> 安全”选项卡（如上图），点击“自定义级别”，然后修改以下项目：

“对未标记为可安全执行脚本的Active X控件初始化并执行脚本”：默认是“禁用”，改成“提示”（解决一些没有证书或证书的正规网站的ActiveX脚本无法提示和使用的问题）；

“下载未签名的Active X控件”：默认是“禁用”，改成“提示”（同上）；

“允许Scriptlet”：默认是“禁用，改成“提示”（纯粹为了向下兼容，现在使用Scriptlet的网站已经很少）；

“在没有使用外部媒体播放机的网页上显示视频和动画”：默认是“禁用”，改成“启用”（解决部分网站的网页视频无法播放的问题）；

“允许对剪贴板进行编程访问”：默认是“提示”，改成“启用”（解决每次在页面上点击复制、或点击“复制”按钮都会弹出提示框询问是否允许的问题）；

“允许网站使用脚本窗口获得提示信息”：默认是“禁用”，改成“启用”（解决一些网站用js弹出框让你填信息的问题——比如云南信息港的聊天室）；

“将文件上载到服务器时包含本地目录路径”：默认是“禁用”，改成“启用”（解决论坛不能上传附件的问题）；

“显示混合内容”：默认是“提示”，改成启用（某些使用ssl的网页中包含有非ssl资源时就会提示，很麻烦）；

如果你是工行U盾的用户，那么在安装了工行U盾的驱动后，对浏览器安全性会做出修改，其中包括把我这里设置为“提示”的项目改成“启用”，大大增加了中流氓软件的几率，严重降低了IE安全性，实际上改成提示就可以了。当然，工行的网银很麻烦，经常是进了页面之后弹出ActiveX提示，等你同意之后，页面刷新又要你重新登录，登录之后又弹出提示……循环N次才可能正常使用，而工行U盾式的修改后，就可以正常使用。工行的行为属于典型的为了自己的方便损害用户的安全。能不用工行就别用了，招行的用户体验极佳。

相关日志

• 2012-03-30 -- 禁用Firefox自带的元素查看工具
• 2009-06-17 -- Dreamweaver中的正则表达式
• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-12 -- 自适应的多列图文混排改进
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2010-10-31 -- CSS技巧:如何避免IE6中的"浮动下坠"【译】
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug
• 2010-10-10 -- 卸载360安全卫士造成网络异常问题解决方案
• 2010-04-14 -- Visual Studio 2010 Ultimate RTM 版开放MSDN下载
• 2009-06-20 -- 工行U盾在Windows 7 x64版下的使用