IE6 7 8BUG锦集

１、浮动元素的双倍margin

说明：这是IE６及其以下版本的一个经典的BUG，触发这个BUG产生的条件是给元素设置了浮动并且同一方向设置了margin值。来看以下代码：

<style type="css/text">

body,div { margin:0; padding:0; }

.wrap { width:300px; height:100px;  background:#ccc; }

.float { float:left; width:30px; height:30px; background:#f00; margin:0 0 0 20px;}

</style>

<div class="wrap">

<div class="float"></div>

</div>

解决方案：改变浮动元素的显示类型，如.float {display:inline; }

2、浮动元素与非浮动元素相邻时的3像素BUG

说明：这个3像素BUG也是IE6下一个臭名昭著的BUG。一个大盒子中有两个小盒子，其中一个盒子浮动另外一个不浮动，这时在IE６下中间就会有３像素的间距。这里，我们借用问题1中的代码：

<style type="css/text">

body,div { margin:0; padding:0; }

.wrap { width:300px; height:100px;  background:#ccc; }

.float { float:left; width:30px; height:30px; background:#f00; margin:0 0 0 20px;}

.floatNone { width:30px; height:30px;  background:#f0f; }

</style>

<div class="wrap">

<div class="float"></div>

<div class="floatNone"></div>

</div>

运行以下代码，你会发现两个盒子中间会有3像素的间距，其实解决方法很简单，让另外一个盒子也浮动就可以了。

或者可以给左边的盒子利用IE6的HACK来设置_margin-right:-3px; ，以清除间距。

3、浮动与绝对定位混用产生的BUG

说明：一个盒子，里面包含了2个浮动的盒子和一个绝对定位的盒子。当设置某些属性值的时候，绝对定位的盒子会在IE6下消失。这种情况并不是每次用到了就会发生，只是当属性设置到一定程度时才会发生，具体的我们来看下面代码：

<style type="text/css">

body,div { margin:0; padding:0;}

.box { width:600px;}

.box1 { position:absolute; left:0; top:0; width:10px; height:10px; background:#f0f; }

.box2 { float:left; width:300px; height:30px; background:#f00; }

.box3 { float:left; width:300px; height:30px; background:#ff0; }

</style>

<div class="box">

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</div>

运行上而代码，你会发现在IE6中使用绝对定位的那个盒子竟然离奇地消失了，这让很多开必者甚是头疼。由问题2我们知道，浮动与非浮动元素相邻时候，会产生3像素间距，那么这个绝对定位元素的消失与这3像素间距有关吗？（留个疑问，感兴趣的可以自己测试哈）

下面我们来看个体的解决方案：

(1)、给父级盒子加上display:inline;

(2)、浮动元素宽度相加+2<父级宽度，此时可以给浮动元素设置_margin-left:-3px;或者_margin-right:-3px;

(3)、给任意浮动元素前面添加一个空盒子；

(4)、给绝对定位元素外面嵌套一个盒子；

4、鬼影或者克隆文本

说明：父元素的内部有多个浮动；最后一个浮动元素前有隐藏元素（包含注释与属性隐藏）；子元素的宽度与父元素相同，或者父元素的宽度减去子元素宽度小于3像素；

这种现象算是随机产生的吧、有时候也看个人运气，所以目前尚无参考例子可寻哦。。。见谅！

解决方案：

1、去掉注释或者使用条件注释(<!--[if ie6]><![endif]-->)；

2、给浮动的子元素加上display:inline;属性；

5、overflow:auto;与position:relative;的碰撞

这也BUG也称作“距出边界的BUG”，它只出现在IE６、７中。两个块元素，父元素设置了overflow:auto; 子元素设置了相对定位，当子元素的高度大于父元素的高度时，IE6、7下会产生一个很难看的BUG，怎么个难看法，这里我就不再损他们了，大家还是先来看看代码哈：

<div style="width:300px; height:200px; overflow:auto; background:#ccc; ">

<div style="width:80%; height:300px; position:relative;  background:#f00;"></div>

</div>

运行代码，大家可以自己测试哈看看差异。^_^

解决方案：给父级元素设置属性position:relative；

6、LI的阶梯BUG

这是一个很有意思的BUG，存在于IE6、7中，当我们在使用UL LI来布局的时候，给LI里面的元素浮动（比如： a），就会出现这种情况；具体我们来看代码哈：

<style type="css/text">

body,ul { margin:0; padding:0; }

li { list-style:none; }

a { text-decoration:none; }

.list { width:300px; height:100px; background:#ccc; }

.list li a { float:left; width:100px; height:25px; line-height:25px; background:#f00;}

</style>

<ul class="list">

<li><a href="#">01</a></li>

<li><a href="#">02</a></li>

<li><a href="#">03</a></li>

<li><a href="#">04</a></li>

<li><a href="#">05</a></li>

</ul>

不信我说的现象，你可以试试哈。就复制上面代码然后运行瞧瞧

…………

……

怎么样，问题出来了吧？呵呵

遇到这种情况，我想大家也都有自己的解决方法。这里呢？我个人觉得是给LI加浮动比较稳妥，至于A如果要求设置宽高，可以转化为块级元素，这个仅是个人见解。这个实例呢，是在一个论坛中看到的、所以借过来与大家分享一下。

7、LI的空白间距

这出中关于LI的一个BUG，存在于IE６/7中。有时候会无端地在LI与LI间增加一个垂直间距。不多说，先来看看代码吧：

<style type="css/text">

body,ul { margin:0; padding:0; }

.list { width:300px; }

.list li { list-style:none; line-height:30px; }

.list li a { text-decoration:none; background:#f00;  display:block}

</style>

<ul class="list">

<li><a href="#">01</a></li>

<li><a href="#">02</a></li>

<li><a href="#">03</a></li>

<li><a href="#">04</a></li>

<li><a href="#">05</a></li>

</ul>

对于网站中一些比较宽松且设了相近背景色布局，或许你看不出这其中的间距差异问题。那么，现在我们针对这点来做一个demo。大家可以复制代码看看效果；

对了这种情况，解决方案也是多种的。大家见仁见智吧，，下面我列举一下自己平时常用的一些处理方法；

1、给A标签设置宽度（根据实际情况来）；

2、给LI添加属性display:inline;

3、给LI设置1像素的底边线（颜色与背景色一致）；这种方法一般不推荐使用吧，因为一旦背景色是渐变或者其他情况，他就暴露了。如果再用margin-bottom:-1px;来隐藏这条线，那就走远路了，何必舍本逐末呢。。。

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

IE浏览器以不支持大量的css 属性出名，同时也因其支持的css属性中存在大量bug。

本页列举了IE下的一些问题，实例样本和一些我们已知的解决方法。

尽管我已经尽力按照它们本来的性质对它们进行分类，仍有许多bug可以分在好几个部分之下，这种情况下，我将会将此bug分在普通bug这一部分。

统计

目前为止。本站点包含46个”普通bug”教程，5个”haslayout bug”教程，6个”不支持的方法”教程，一个“冲突bug”教程。总共58个教程，70个解决方法。

最近的教程发布于2009年8月19日 15:38:47 星期三

站点包含44个IE6 bug，28个IE7 bug以及19个IE8 bug。

注意版本

在教程中你会看到诸如“影响：IE8和所有以下”或“修复：所有版本”。这里的“所有”意思是IE6，IE7和IE8。 IE5和IE5.5已经是历史了，本网站没有考虑这些版本的教程和解决方案的。

普通bug

此部分包含的是那些不能快速定位为其他部分或是可以同时归类到两部分或更多部分的bug。

普通IE css bug

bug名称	影响版本	描述
Image Label Focus Bug	IE8,IE7,IE6	<img>元素在<label>元素之内，单击时，焦点不会转移到相应的表单控件
按钮Margin-Auto非居中	IE8	Button或类似元素并不居中当{ display: block; margin-left: auto; margin-right: auto;}作用与它 时候且“宽”是不明确的
不正确的浮动收缩-包裹bug	IE7,IE6	一个浮动元素（设置了clear属性）在另一个浮动元素之后时不能正确的收缩-包裹
overflow滚动条的不一致	IE7,IE6	非常规的在<html>元素上设置overflow属性可能会出现关于<body>元素的overflow bug
浮动挤压怪异差距bug	IE7,IE6	倒数第一个和倒数第二个浮动元素的间距似乎垂直堆叠了
浮动复制最后一个字符bug	IE7,IE6	浮动元素的最后一个字符被复制
空元素高度bug	IE7,IE6	有”layout”属性的空元素获得高度
表单控件的双边距bug	IE7,IE6	<input>和<textarea>元素上的水平margin“继承”于含有margin和layout属性的祖先
IE7 1像素点边框表现为虚线边框	IE7	当至少有1边的变宽宽度大于1像素时，1像素的点边框表现为虚线边框
Relative Overflow失效的bug	IE7,IE6	含有overflow（hidden或auto）属性的元素的后辈如果含有position:relative属性，则其表现得就像是设置为visible属性一样
IE7 :hover“阻断”于absolute的bug	IE7	当绝对定位的子元素隐藏不可见的时候，使用:hover改变其left/top值貌似是不管用的。如果其可见，left/top也不会因:hover而改变
Button按钮 :active时背景改变bug	IE8	当:active状态应用与<button>或<input type=”submit” />时背景会向上像左移动
忽略:focus的bug	IE8	当一个包含:focus的选择器在另外一个简单的选择器之后，:focus是被忽略的。
看不见的hover边框bug	IE8	当设置了outline，在:hover状态下，下边框要么没有完全显示，要么短了1像素（或是取消了outline）
Padding/margin百分比bug	IE8	与百分比垂直padding特定组合，垂直margin间距似乎会出岔子，在父级的父级设置了padding或border的亦会如此
图片浮动项目符号混乱bug	IE8	在项目列表中含有浮动属性的图片的时候，项目标记（或编号）位置不正确或是压根没有渲染出来
TH标签text-align不继承的bug	IE8	祖辈的text-align值不会被TH元素继承下来
样式文件32的数目限制bug	IE8,IE7,IE6	第32个及其以后的样式文件中的样式一概忽略(i.e. <style>, <link> 或 @import)
白色背景hover无效bug	IE7	背景hover后转为白色背景无效
IE7子选择器注释bug	IE7	一个选择器如果包含子选择器，且在注释之后，是被忽略的
星号 HTML bug	IE6	* html选择器在IE6下不会被无视
IE6 !important忽略bug	IE6	如果相当的规则再设置一次，则!important关键字将会被忽略
PNG图片和背景色的不匹配	IE8,IE7,IE6	尽管有相同的颜色代码，但是css中的指定的颜色与png图片是有差异的
Auto Margin不居中的伪bug	IE8,IE7,IE6	block属性元素设置了两侧的margin auto不居中显示
:first-line!important规则无效bug	IE8	当使用了!important修饰语后，:first-line内部的伪class完全不起作用
:first-letter无效bug	IE6	全部的:first-letter规则集无效
:first-letter!important无效bug	IE8	当使用了!important修饰语后，:first-letter内部的伪class完全不起作用
部分可点击bug	IE6,IE7	只有文字是可点击的/有反应的，非得把鼠标移到真正的文字上才能有:hover反应，链接失效
楼梯bug	IE6,IE7	浮动元素像梯子一样一个一个堆砌
列表背景消失bug	IE6	<li>, <dt>, <dd>背景消失
noscript幽灵bug	IE8,IE7,IE6	脚本启用的时<noscript>元素显示，仅border/background从中显示
透明无法点击的bug	IE8,IE7,IE6	使用了filter滤镜修复png背景透明问题的时候背景图片的透明区域链接无法点击
列表内容下沉bug	IE8	<li>里面的内容在项目列表编号的下面
<ol>数值不增加bug	IE7,IE6	<ol>中显示的数目不随着<li>增加
<ol><ul>无编号bug	IE7,IE6	项目编号/数值从<ol><ul>元素那儿消失了
line-height图片不垂直居中的bug	IE7,IE6	使用line-height方法，图片不垂直居中
没有背景图片bug	IE8,IE7,IE6	IE下使用了background背景图片，但是背景图片不显示（使用background缩写属性）
自定义光标bug	IE8,IE7,IE6	自定义光标在IE下不显示
背景泄露bug	IE6	背景溢出到跟随其后的其他元素上去了
高度撑开的bug	IE6	元素的高度比指定的高度要长
宽度撑开的bug	IE6	元素的宽度比指定的宽度要宽
双边距bug	IE6	左边距或右边距在浮动元素上双倍
负margin bug	IE7,IE6	当使用负margin时，容器之外的部分元素不可见
斜体字浮动bug	IE6	元素含有斜体字在浮动元素后文字下沉
3px空白bug又称文本慢跑bug	IE6	靠近浮动元素的元素要么有3px的间距，要么位置偏下，或是保持偏移当几个元素依次浮动时
Text-Align bug	IE7,IE6	text-align属性影响block性质的元素

Haslayout bug

有haslayout或没有haslayout导致的IE bug

haslayout IE css bug

bug名称	影响版本	描述
令人害怕的浮动bug	IE7,IE6	haslayout的元素自动清除浮动代替包围浮动元素
边框混乱bug	IE6	边框显示混乱。例如在不该的地方显示或丢失
hover bug	IE6	选择器例如a:hover foo{}不起作用
部分点击bug	IE6	样式为display:block<a>链接仅文字部分是可点击的，事实上在标准浏览器下还有额外的区域可点击
内容消失bug	IE6	一些内容在页面滚动或浏览器最大化最小化的时候消失或重现

不支持的方法

各种各样的方法提供的属性效果和属性值在IE下是不执行的

不支持的方法

bug名称	影响版本	描述
不支持子选择器方法	IE6	子选择器无效
Max-width方法	IE6	max-width不支持
Max-height方法	IE6	max-height不支持
opacity	IE8,IE7,IE6	透明度opacity不支持
Min-width	IE6	min-width不支持
Min-height	IE6	min-height不支持

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

 

 

1：li边距“无故”增加

任何事情都是有原因的，li边距也不例外。

先描述一下具体状况：有些时候li边距会突然增 加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其低级元素ul的padding引 起，padding的上下值对li有影响，左右无影 响。所以只好笨手笨脚地把padding去掉，换成margin。这是能解决问题，但往往不是我们想要的结果，或许 还会引起其他不必要的怪现象。

现在终于发现解决这个问题的方法，其实很简单，既然是有ul引 起的，就设置ul的显示形式为*display:inline-block;即可，前面加*是只 针对IE6/IE7有效，其他浏览器并不渲染这个属性。

2：分页数字 字体用“Arial ”加粗不抖动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>
<title>无标题文档</title>
<link href="css/style.css"rel="stylesheet"type="text/css"/>
<style type="text/css">
body, ul, h1 {
font-family:Arial;
font-size:12px;
}
.page {
text-align:center;
}
.page a {
display:inline-block;
padding:5px 8px;
text-decoration:none;
border:1px solid #09F;

color:#FFF;
}
.page a:hover, .page .selected {
border:1px solid #CCC;
background-color:#FFF;
color:#000;
font-weight:bold;
}
</style>
</head>
<body>
<h1>分页样式</h1>
<div class="page"> <a href="#">1</a> <a href="#"class="selected">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a>
<a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> </div>

</body>
</html>

3：IE6 CSS选择器区分IE6
IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。
/*IE6 专用 */
.content {color:red;}
/* 其他浏览器 */
div>p .content {color:blue;}

4：IE6最小高度
IE6 不支持min-height属性，但它却认为height就是最小高度。解决方法：
使用ie6不支持但其余浏览器支持的属性!important。
#container{min-height:200px; height:auto !important; height:200px;}

5：IE6100% 高度
在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得
先给html和body定义height:100%;。

6：IE6躲猫猫bug
在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一
些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。
解决方法很简单：
1.在（那个未浮动的）内容之后添加一个<span style="clear: both;"> </span>
2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

7:IE6绝对定位元素的1像素间距bug
IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会
产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。

8: IE下z-index的bug
在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给
其父级元素定义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年发展党员工作情况进…
发布日期: 2010-5-31 16:05:08 类别：院务通知 点击: 139">
[05-31]  关于对我校2006年至2009年发展党员工作情况进…
</a>

注意到了吗。。很简单，只要使用 这样的转义符号,即可实现换行。在一些tooltip要求定制性不高的情况下，这样的显示效果相 当不错，而且是浏览器原生的效果，安逸。

哎，虽然号称精通div+css，但是发现一些小小但是很实用的技巧自己还不知道，看来html还有很多东西可以挖掘。
16：如何去掉点击链接时的虚线

解决方案1：在<a href="http://blog.sina.com/wangfengteacher"onFocus="this.blur()> Mike blog</a>
解决方案2：在标签中加入 hidefocus<a href="http://blog.sina.com/wangfengteacher"hidefocus> Mike blog</a>
解决方案3: 如果连接太多，可以用外部链接 .HTC 文件。如，blur.htc
文件内容如下：
<public:attach event="onfocus"
onevent="makeblur()"></public:attach>

<SCRIPT language=javascript>
function makeblur(){
this.blur();
}
</SCRIPT>
在 CSS 中加入如下代码：
A { behavior:url(blur.htc); }
解决方案4 ( 推荐 )：使用CSS样式，可加入代码：a {blr:expression_r(this.onFocus=this.blur())}

如果是FF等浏览器的话可这样写 a{ouline:none;}

17:制作1px细线表格

解决方案1 ( 推荐)：我们只要给这个table一个border-collapse:collapse的样式，就可以达到这个效果了。
具体如下：
1、HTML结构:
<table width="300" border="1" cellpadding="0"cellspacing="0" bordercolor="#C0C0C0"
style="border-collapse:collapse;">
<tr>
<td> </td>

<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

18：IE6 下z-index无效

在CSS中，通过z-index这个属性改变层级，要让z-index起作用有个前提，就是元素的position属性要 是relative，absolute或是fixed。

z-index层级越高，内容越应该在上面显示。在大部分的浏览器在大部分的情况下，确实如此，但是不绝对，尤其遇到IE6。

1、关于效果截图的些必要说明

下面的不是废话，是为了更容易的理解我下面唾沫横飞的内容。

以下所有结果截图的大背景如下：
1、页面上固定不动的，一成不变的，送豪宅也不会从良的是一个黑色背景，透明度 40%，几乎满屏显示的层级为1的绝对定位层。HTML为：

<div></div>

对应CSS为：#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}

作用是为了让层级关系一目了然。看：

这说明内容在z-index为1的绝对定位层之下。
这说明内容在z-index为1的绝对定位层之上。

2、页面上做对比的是美女图片，图片在半透明黑色绝对定位层的上面还是下面很容易辨别，这样，您就能够对我所说的z- index不起作用有很直观的认识了。

2、IE6的抱怨：浮动让我沉沦
现在开始真正的讲述 问题的产生，原因以及解决了。首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个：1、父标签 position属性为relative；2、问题标签无position属性（不包括static）；3、问题标签含有浮动(float)属性。
您 可以拿下面的代码自己做个简单测试：

<div></div>
<div style="position:relative; z-index:9999;">
<img style="float:left;" src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>

丫的，这z-index都9999了，层级够高吧，但是，看下面的图：

这一对比就知道问题了，可能有人会疑问，这会不会是IE6的relative自己感冒了，而不是浮动(float)携带 了“甲流病毒”。好，我现在去掉浮动，HTML代码如下：

<div></div>
<div style="position:relative; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>

结果IE6下：

我想，问题应该都清楚了，至于原因，我起初以为是haslayout搞的鬼，后来，用zoom一测试，发现不是（IE7 下无此bug也证明不是 haslayout的原因），似乎就是这个float会让z-index失效。由于将外部div的position:relative属性改为 absolute可以解决这一问题，我就怀疑是不是浮动让relative发生了些变化，float与relative在水平定位上可以说是近亲，会不会 是因为这两者搅和在一起所以什么“畸形”“体弱多病”就出现了。这仅是我的猜测而已，真正的原因还是去问IE6的后妈吧。

解决方法，解决方法有三，1、position:relative改 为position:absolute；2、去除浮动；3、浮动 元素添加position属性（如relative，absolute等）。

3、固执的IE6：它只认第一个爸爸
可能不少人知 道，这IE6下，层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：
父标签position属性为relative 或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它 们的父标签的z-index谁高谁低。

有一定经验的人可能都知道上面的事实。但是，相信这里面很多人不知道IE6下，决定层级高低的不是当前的父标签，而是整 个DOM tree（节点树）的第一个relative属性的父标签。有时平时我们多处理一个父标签，z-index层级多而复杂的情况不多见，所以难免会有认识上 的小小偏差。

好，下面展示这个bug。

条件很简单，只要绝对定位的第一个元素的第一个爸爸，或者说是最老的那个爸爸级别的人的relative属性小于黑色半 透明层的z-index层级。例如下面的HTML代码：

<div></div>
<div style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>

可以看到，mm3图片的父标签div 是绝对定位，层级9999，比1大多了，绝对定位的父标签层级1000(10000也一样)，也比黑色半透明层的z-index:1大多了，但是，我们可 怜的IE6童鞋——

再看看以Firefox为代表的其他童鞋：

IE7与IE6有着同样的bug，原因很简单，虽然图片所在div当前的老爸层级很高(1000)，但是由于老爸的老爸 不顶用，可怜了9999如此强势的孩子没有出头之日啊！

知道原因解决就很轻松了，给第一任老爸添加z-index后的HTML代 码如下：

<div></div>
<div style="position:relative; z-index:1;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
</div>
</div>
</div>

结果IE6童鞋喜笑颜开，春光灿烂：

19：css reset中的list-style:none

在IE6,7下,当UL不具有float:left;display:inline;时:
无论有没有list-style:none这个属性,列 表符都被隐藏,不占位置(下面代码中的5,6)
当UL具有float:left;display:inline;属性时
list- style:none,列表符被隐藏,但是仍然留有位置(list-style-position:inside);
未 设置list-style:none;列表符被隐藏,也不占位(list-style-position:outside)

在firefox中只要list-style-type为none ,则 无论list-stype-position的值为outside或inside , list-style都能很好的被隐藏
而在IE6,7中,仅 设置list-style:none,并不足以解决所有问题
所以我认为在css reset的时候使用 list-style:none outside none 更好

20：链接去边线（完全兼容）

a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}

21: display:inline-block 额外产生的6PX 或者4px margin

今天在做一个Timeline的模块的时候遇到一个棘手的问题： 给元素添加display:inline-block 属性的时候会产生额外的4px的margin-right。

原始代码

.YP_timelineChart_box li{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
text-indent:-3000px;
width:5px;
vertical-align:bottom;

position:relative;
}

页面渲染结果：

每一列都会向右产生外边距4px，苦思不得其解，尝试负的外边距，但是涉及到其他的问题:每个li标签会重叠1-2个px，妨碍到鼠标hover状 态的事件。尝试修改doctype类型也不见效果。后来尝试了另外一个方法：

把原来的HTML 代码结构：

更改为：

这样就不会产生额外的外边距，也弄不清楚为什么会出现这种问题。先暂时记下，以后再研究研究。

22: IE6中伪类:hover的使用及BUG

以前未曾遇到类似的问题，一番google，才知道这是IE6处理CSS伪类:hover的Bug。例如如下的代码：

<style>
a {color: #333;}
a span {color: green;}
a:hover {}
a:hover span {color: red; }
</style>
<a href=”http://www.taobao.com“> 淘宝网 <span> 淘你喜欢 </span></a>

在IE7/FF中，鼠标移动到链接上时，”淘你喜欢”字样会变为红色，但IE6则无反应。所以IE6的bug就是如果a 与 a:hover 的css定义是一样的，也就是说如果a:hover 中没有样式的改变，hover就不会被触发。但如果在a:hover{}增加一些特定的属性，例如

a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background: none;}

此时hover就可以触发了。

23：原来IE6支持!important

.demo { color:#F00!important; color:#000; }/*IE6显示错误理解：.demo显示为黑色*/
/*而下面IE6是正确理解的：.demo显示为红色*/
.demo { color:#F00!important;}
.demo { color:#000; }

24:去掉button按钮左右两边的留白

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{padding:0; margin:0}
input,button{overflow:visible;padding:0;}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="submit" name="button" id="button" value="button按钮左右留白的解决方法" />
</form>
<button><span>button按钮左右留白的解决方法</span></button>
</body>
</html>

25:中文字体在css中的写法

黑体SimHei\9ED1\4F53黑体

宋体SimSun\5B8B\4F53宋体
新宋体 NSimSun\65B0\5B8B\4F53新宋体

仿宋FangSong\4EFF\5B8B仿宋
楷体KaiTi\6977\4F53 楷体

微软正黑体Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53微软正黑体
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1微软雅黑

幼圆 YouYuan\5E7C\5706幼圆

26： ie6里width:100%是相对于上有高度设置的元素 其他浏览器是相对于上个相对定位或绝对定位的元素

<div style=" width:600px; height:600px; background:#000;">

<div style=" width:500px; height:500px; background:#333;">

<div style=" float:left; background:#666; width:400px;" >

<div style=" width:300px; height:300px; background:#999;">

<div style=" width:100%; height:100%; background:#f00; position:absolute; left:0; top:0;">

在非ie6的浏览器中都是满屏幕的红， 说明非ie6的浏览器的width和height的百分比，都是相对的上个相对定位或者绝对定位的元素，没有就为html元素

，而ie6中的width和height 的百分比，相对的是上个有高宽显示设置的元素，而且height的百分比设置失效，所以上述代码在ie6中就出现宽度穿越了他的父元素而遇见width:500px;的元素的时候，边把自己设置成了width:500px;而height的设置则失效， 这个， 让人很蛋疼！ie6，真的该早点走了！

</div>

</div>

</div>

</div>

</div>

27： ie不缓存背景图片的解决办法

高性能web开发中，一张小小的图片请求能省的就省，可IE6存在不缓存背景图的bug.如果重复使用了一个图片作为背景，那么每用一次就会重新去服务器拉一次。。。给服务器带来巨大的压力。解决方法有两种，

1：采用JS

var ua = navigator.userAgent.toLowerCase();

var isIE6 = ua.indexOf("msie 6") > -1;//判断是否为IE6

// remove css image flicker

//IE6下默认不缓存背景图片，CSS里每次更改图片的位置时都会重新发起请求，用这个方法告诉IE6缓存背景图片

if(isIE6){

try{

document.execCommand("BackgroundImageCache", false, true);

}catch(e){}

}

2.在页面上直接使用1个DIV元素来加载该图片，这样加载图片就能真正被缓存，鼠标移动也不会发送请求了。

28:ie6下css实现max/min-width/height

_width:expression(this.width>300?"300px":ture); max-width:300px;

_height:expression(this.height>300?"300px":ture); max-height:300px;

29：css空白外边距互相叠加的解决方法

body{width:300px; font-family:'微软雅黑'; font-size:1em; text-indent:10px; line-height:1.25;}

div{background:#000;margin:10px;}

div p{background:#f60;margin:15px}

这是一个div元素内嵌套p的简单样例,先别复制保存为html测试,在你看完上面的代码后,你是否以为它出为你呈现如下图的效果?

好,现在你可以复制上面代码,保存到本地,然后在浏览器中打开.你会惊讶的发现,它呈现给你的效果是这样的:

为什么会这样呢?按CSS中,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离.故,子元素的顶部和底部空白边就突出到元素的外围了.p元素的15px外边距与div元素的10px的外边距形成一个单一的15px垂直空白边,另外,形式的这个空白边并非为div所包围,而是呈现在div的外围.所以,我们看到了第二张效果图.
如何解决?本人比较推荐两种解决方式:
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid #ddd;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px
另外,还可以通过外围元素绝对定位,或者定义子元素浮动等方式实现.

30：纯css解决多行文字垂直居中

<style type="text/css">

.alert{

width:400px;

height:250px;

display:table-cell;

vertical-align:middle;

line-height:1.5em;

border:1px solid red;

}

.alert_blank{

height:100%;

width:0;

display:inline;

vertical-align:middle;

zoom:1;

}

.alert_con{

width:100%;

zoom:1;

display:inline;

vertical-align:middle;

}

</style>

<div class="alert">

<div class="alert_con">哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～</div>

</div>

其大概原理为：第一个alert_blank容器，display:inline以后作为行内元素，它的高度为100%，宽度却为0，相当于紧贴外层容器左边框的一条透明的线，这样就使得外层容器里面只存在一行。外层容易的vertical-align:middle使得其内部相当于一行文字垂直居中。真正盛放内容的div也是display:inline，它对外和blank垂直居中，只要内部文字不超过blank的高度，这个效果将是完美的。虽然从语义化上讲，用空白div布局说不太过去，但是瑕不掩瑜。另：zoom:1是为了触发hasLayout。

31:关于flash遮盖div浮动层

(a) place Flash embed script in <div> container (I use SWFObject.js)[将flash嵌入脚本放到一个div容器中]

(b) add wmode=transparent to Flash embed script[增加wmode=transparent 到flash嵌入脚本]

(c) set <div id="flashcontent"> container with z-index:-1; [将外层容器的z-index设置为-1]

(d) set <body> tag with style .. position:relative;left:0px;top:0px;z-index:0;
(otherwise Firefox does not accept negative z-index)

(e) set floating iframe in container with z-index: 99;[将浮动的iframe在容器中的zindex设置为99]

(f) use CSS to position flashcontent and htmlcontent containers.[使用css来调整flash容器和html容器的位置]

其他方案网上比较多见,不做阐述.在此说下使用第一个方案如何解决:

var so = new SWFObject("XXX.swf", "flashId", "宽度", "高度", "版本", "背景色");

//设置flash不遮盖div层

so.addParam("wmode", "opaque");

so.write("flashcontent");

如此设置即可让flash无法遮盖住div

32:如何处理ie6的文字行高
ie6下汉字就会显示偏上位置，而在标准浏览器中不存在这个问题字体 Tahoma,试下
不过如果有规定第一个字体是用啥的，那就只能忽略这个问题..我终于明白淘宝为啥把Tahoma字体放到第一位了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>测试ie6的文字行高表现</title>

<style type="text/css">

body,ul,li,p {margin:0;padding:0;}

body { font:12px/1.5  Tahoma,"宋体",Arial, Helvetica, sans-serif; }

ul {float:left;list-style:none; margin-bottom:10px;}

ul li, p { margin-top:4px;background:silver;clear:left;}

ul li {float:left;margin-top:4px;}

</style>

</head>

<body>

<ul>

<li>岁月不饶人哪</li>

<li>hjgt</li>

</ul>

<p>岁月不饶人哪</p>

<p>hjgt</p>

</body>

</html>

33:利用 CSS 跨浏览器地隐藏文字一法

ont-size:0;        // for firefox & opera

color: transparent; // for webkit

overflow:hidden;    // for IE

font-size:0;

filter:alpha(opacity=0);

自测后兼容的浏览器如下：

IE 6-8

Firefox 1-4

Opera 9-10

Safari 3-5

Chrome 1-6

34:button在chrome下默认有2px的margin

<button>在chrome下有两像素margin</button>

35:ie6和ie7里面margin失效

<div style="padding:20px;background:#f00;">

<div style="background:#fff;height:200px;margin:50px;">我的margin在ie里面失效了</div>

解决办法去掉里面div的高度