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边框实现“无图化”设计【译】
• 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
• 2010-10-20 -- clearfix改良及overflow:hidden详解【译】
• 2010-10-10 -- 卸载360安全卫士造成网络异常问题解决方案

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

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支持丰富伪类
• 2011-05-26 -- 深入解析CSS样式层叠权重值
• 2011-03-07 -- IE8/9兼容性设置
• 2011-03-04 -- 在非IE浏览器中模拟zoom创建块级上下文【译】
• 2010-10-30 -- webkit中BFC元素临近浮动元素时的边距bug

安装完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盾式的修改后，就可以正常使用。工行的行为属于典型的为了自己的方便损害用户的安全。能不用工行就别用了，招行的用户体验极佳。

相关日志

• 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版下的使用
• 2009-05-23 -- windows 7 x64 上的Google Chrome

不过我卸载360之后倒是遇到了几个非常“诡异”的问题——之所以加双引号是因为那是在没找到原因的时候确实觉得很奇怪——然后我通过墙外的google来搜索也没找到较明确的解决办法。所以在找到原因并顺利解决了问题之后我决定把方法写下来，以方便遇到和我相同或类似问题的朋友。

问题描述：

1. Internet Explorer和Chrome设置自动代理pac文件无效；

2. 访问QQ空间会偶尔遇到完全没样式，js数据加载不出来的问题；

3. 访问QQ校友的应用时，偶尔会出现域名无法解析的问题（cdn镜像域名无法解析）；

4. QQ旋风提示“获取积分失效”，由于无法获得积分信息和等级，所以和年费会员或会员VIP5以上身份挂钩的离线下载就莫名消失了。

以上就是这两三天困扰我的问题。我想尽了各种办法都没解决，但是后来通过一些工具软件逐步定位到是域名解析不成功造成。

解决过程：

既然定位到是域名解析导致的问题，当然要从域名解析着手。一开始以为是设置pac自动代理文件不成功造成的（因为基本上是chrome和ie出现问题，firefox出问题相当少），所以就完全去掉了pac自动代理，结果问题依旧。

然后我考虑可能真的是QQ相关业务的CDN镜像的域名的Name Server出问题了（chrome可以查看到是哪个Name Server解析哪个域名失败），如果是这样，那就只能等了。但是后来发现在公司的电脑上一切正常，只有在家里才会遇到这些问题。所以应该可以排除域名服务器出问题的可能了。

再回到自己电脑上找原因，我当时有两个怀疑：一是长城宽带的线路问题；二是我自己的本地Name Server设置问题。因为我一直是用OpenDNS的Name Server，不排除OpenDNS被墙或者像google一样“被抽风”的可能。所以我决定去掉OpenDNS，改为全自动获取，用长宽自己的Name Server。

就在打开本地连接属性的时候我一下子看到了本来应该已经被卸载的360 Network Monitor Driver:

（发此文时我的已被卸载，图片借用网络上的）

360 Network Monitor Driver是360安全卫士和360防火墙用来拦截和监控网络连接的重要组件。一般如果有安装虚拟机的话（比如VMWare，VMWare Player，VitualBox，XPMode）也都会在本地连接增加相应的驱动或者协议，这是很正常的。

但是当时我的360已经卸载了，所以这个驱动留下来就不正常了，它已经没有存在的意义了。我当时忘了去看一下，360安装目录下的文件是否还有留下的，就直接卸载了这个驱动。

结果卸载完后，我的旋风离线下载功能立刻恢复正常。我很激动地重新去设置IE和Chrome的Pac自动代理文件，也正常了。再打开校友和空间的几个页面不断刷新坚持了五六分钟，没有再出现问题。

由此我觉得由于这个360残留驱动导致问题的可能性比较大，当然，没有理论知识和更具体的实验数据做支撑我也就不能下定论。只能说这是一个可能正确的判断和处理办法。

如果你也打算卸载掉360，或者和我一样已经卸载了，那么建议你应该去看看你的360 Network Monitor Driver是否也一起被卸载了。如果没有的话，还是自己动手卸载一下。主程序都卸载了，留下的这个驱动是肯定没有用的。

相关日志

• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-12 -- 自适应的多列图文混排改进
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2011-03-07 -- IE8/9兼容性设置
• 2009-06-20 -- 工行U盾在Windows 7 x64版下的使用
• 2009-06-17 -- Dreamweaver中的正则表达式

问题的根源不在于驱动程序，从我上面描述的情形就能看出来，关键在于不能下载证书，我觉得很有可能是IE 8 兼容性的问题。

先不管问题是什么吧，暂时最方便快捷的方法是：

1、在另外一台电脑（非 Windows 7 x64 版操作系统，最好是 Windows XP 或者 Windows 2003， Vista也可以）上，安装工行U盾的驱动和软件；

2、装完以后在该电脑上插上U盾，登陆网上银行，按照提示安装证书。建议顺便把U盾的密码也设置好；

3、回到 Windows 7 x64 版所在的电脑，安装U盾驱动和软件；

4、装完以后，插入U盾，登陆网上银行，你会发现已经可以正常使用了。

以后再到任意其它的 Windows 7 x64 系统的电脑上，只要安装了工行U盾的驱动，都可以正常使用U盾。

说点题外话，在 Windows 7 x64 系统下，如果只是浏览普通网页（比如看新闻、逛论坛），可以使用 Internet Explorer 8.0 x64版，因为连Flash Player在内的绝大部分合法有签名的ActivX插件和IE控件都还不能在64位IE下正常运行，则没有签名的流氓软件、木马也一样很难兼容，因此安全性得到提高；

但是如果要使用网页多媒体或者一些功能较强的web界面的话，最好还是用32位的IE 8.0（开始菜单、桌面和快捷方式上的默认IE就是32位的），这样能更好的兼容绝大部分网站。

下次我把使用Windows 7 x64以来遇到的和IE相关的问题都整理一下，单独发一篇。

相关日志

• 2009-06-05 -- Windows 7 兼容性展示：大航海时代4
• 2009-05-16 -- 微软发放的Windows 7测试版光盘
• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-12 -- 自适应的多列图文混排改进
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2011-03-07 -- IE8/9兼容性设置
• 2010-10-10 -- 卸载360安全卫士造成网络异常问题解决方案
• 2009-06-17 -- Dreamweaver中的正则表达式
• 2009-06-08 -- 在 IIS 7.x 中用 FastCGI 运行 PHP
• 2009-05-24 -- Visual Studio 2008 搭配64位SQL Server的问题解决方案

今天在 百度知道 上给人回答问题的时候，遇到一个要做复杂替换的问题，而且提问者明确说是在 Dreamweaver 里面做。我终于不懒了一次，上 adobe 的网站上查了一下。把 Dreamweaver 里面的正则表达式部分好好看了一遍。全部内容如下：

下表列出了在正则表达式中使用的特殊字符、其含义和用法示例。若要搜索包含该表中某一特殊字符的文本，请在特殊字符前面附加一个反斜杠，令其转义。例如，若要在 some conditions apply* 短语中搜索实际的星号，您的搜索模式应类似于：apply\*。如果您没有令星号转义，您将找到“apply”的所有匹配项（以及“appl”、“applyy”和“applyyy”的所有匹配项），而不只是后面跟有星号的那些匹配项。

使用括号在正则表达式内分隔出以后要引用的分组。然后在“替换”域中使用 $1、$2、$3 等来引用第一个、第二个、第三个和更后面的括号分组。

例如，通过搜索 (\d+)\/(\d+)\/(\d+) 并用 $2/$1/$3 替换它，可以在由斜杠分隔的日期中交换日和月（因此可以在美国样式日期和欧洲样式日期之间进行转换）。

相关日志

• 2011-03-07 -- IE8/9兼容性设置
• 2011-03-20 -- 容易被误解的overflow:hidden
• 2011-03-12 -- 自适应的多列图文混排改进
• 2011-03-10 -- CSS边框实现“无图化”设计【译】
• 2010-10-10 -- 卸载360安全卫士造成网络异常问题解决方案
• 2010-04-14 -- Visual Studio 2010 Ultimate RTM 版开放MSDN下载
• 2009-06-20 -- 工行U盾在Windows 7 x64版下的使用
• 2009-04-16 -- QQ2009正式版发布
• 2008-06-09 -- 参加火狐3下载日，帮助Firefox创造世界记录！
• 2005-12-03 -- Visual Studio 2005体验感受