出 现 错 误 的 表 现 。 解 决 方 法 是 给 其 父 级 元 素 定 义

z-index ， 有 些 情 况 下 还 需 要 定 义

position:relative。

9: Overflow Bug

在

IE6/7 中，overflow 无法正确的隐藏有相对定位 position:relative;的子元素。解决方

法就是给外包容器

.wrap 加上 position:relative;。

10: 横向列表宽度 bug

如 果 你 使 用

float:left;把 <li> 横 向 摆 列 ， 并 且 <li> 内 包 含 的 <a>（ 或 其 他 ） 触 发 了

hasLayout，在 IE6 下就会有错误的表现。

解决方法很简单，只需要给

<a>定义同样的 float:left;即可。

11: 列表阶梯 bug

列表阶梯

bug 通常会在给<li>的子元素<a>使用 float:left;时触发，我们本意是要做一个

横向的列表

(通常 是导航栏)，但 IE 却可能呈现出垂直的或者阶梯状。

解决办法就是给

<li>定义 float:left;而非子元素<a>，或者 给<li>定义 display:inline;也

可以解决。

12: 垂直列表间隙 bug

当我们使用

<li> 包含一个块级子元素时，IE6(IE7 也有可能)会错误地给每条列表元素

（

<li>）之间添加空隙。

解决方法：把

<a>flaot 并且清除 float 来解决这个问题；另外一个办法就是触发<a>的

hasLayout（如定 义高宽、使用 zoom:1;）；也可以给<li> 定义 display:inline;来解决此问题；
另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。

13: IE6 调整窗口大小的 Bug

当把

body 居中放置，改变 IE 浏览器大小的时候，任何在 body 里面的相对定位元素都

会固定不动了。

解决办法：给

body 定义 position:relative;就行了。

14: 文本重复 Bug

在

IE6 中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，

就有可能引发文本重复

bug。

解决办法：给浮动元素添加

display:inline;。

15：链接 a 的 title 属性中的文字换行

我们都知道，可以给链接

a 加上 title 属性，这样鼠标移动上去会显示 title 属性定义的 文

字，常常用来加一些提示语句，比如说点击查看详情之类的，代码形如：

<a href=”#” title=”

点击查看详情

”>链接 xx</a>。之前一直没有仔细注意过这个东西。如果鼠标浮动上去要显

示更多东西的话，怎么实现呢。第一 反应是

jquery 的 tooltip 插件。今天无意中发现某个

学院的网站鼠标移动上去可以显示这么完整的信息，效果看起来似乎还可以，就想看看怎
么做的， 找了下，没发现有

Javascript 脚本，再往链接的地方一看，终于让我发现了门道

了：

<a href='#' target="_blank" title="标题: 关于对我校 2006 年至 2009 年发展党员工作