若干IEbug及解决方案:: 5ivedance企业库|免费b2b网站

这篇东西写了很久，大概半个月了，开始想详尽的写完所有的IEbug，但是要回家了，暂时先把这些放出来吧。写的过程参考了很多文章，比以前明白了很多东西，也发现了很多不知道的问题，如果您看完了，发现任何错误疑点、任何意见观点可以评论或者给我。

命中注定总有一个浏览器作为复仇女神来到世界各地的开发者中，在web标准运动初期，这个角色是Netscape Navigator 4，垂死挣扎就是不肯死去，阻碍着现代标准的进程；今天这个角色被Internet Explorer 6这位邪恶的坏同学代替了。——

盒模型（The Box Model）

我这里把盒模型真正给丫立体化（特殊到正方体了怎么样）：

有一个正方体宝贝比如是传说中象征永恒的水晶，为了保护它需要一个精美的盒子。为了防止碰撞，在盒子和水晶之间预留了空间来放海绵。在盒子外面再加一层泡沫塑料，也是为了防止水晶磕磕碰碰。我们现在把这宝贝一边的宽度定位width:60px(可以假想为60cm)，盒子里面的海绵厚度padding:15px（也就是说海绵厚度为15cm），盒子的皮厚border:5px（包装够结实——5cm厚），那需要的盒子边长就是60+2*15+2*5=100px（盒子的边长是100cm），水晶盒子外面的泡沫塑料是margin:10px（外面再包10cm厚的泡沫，结实！盒模型的问题和它无关，先把他撕下来扔掉好了-__-）

The-Box-Model

对于标准的盒模型来说：他们的盒子是看到的实际的盒子，是包含了海绵和水晶的盒子。但是早期的IE看到的只是字面意思上的width。

解决方案：

在HTML页面里面加入完整的<!DOCTYPE>，IE6会切换到近似乎标准的模式，这样IE6就会正确的解释盒模型。如果你不这样做，也可以在定义了width的元素里面不用padding和border，在被封闭的元素里面随意的运用。

我一般解决这个问题的方法是，不在boxes里面用只在layout用.如果box里面有文字在
标签里，我会在p元素直接用padding，跳过这个问题，但是这是可行的。——css-tricks

双边距问题（Double-Margin）

几乎所有的有些经验但经验不足的同学都遇到过这个悲剧的现象，浮动div嵌套着用的不亦乐乎，margin-padding此起彼伏。定了个div想和外部的div保持距离，就在里面的div来个margin，这时候就产生了传说中丑名远播的双边距问题：

未修正代码：

#selector{
width:200px;
height:50px;
float:left;
margin:5px 20px;
border:#00a6cc;
}

修正代码：

#selector{
width:200px;
height:50px;
float:left;
margin:5px 20px;
border:#00a6cc;
      display:inline;/*hi,-___-kill the double margin bug*/
}

在做BI十周年的时候我在父元素用了padding，在IE6标准模式下这样做也是一种办法。

最小/大宽/高（min-width/max-width and min-height/max-height）

IE6不能解释最小{zd0}宽高，其实我觉得这用的不太多。对图片在站点中的重要问题有很多不知道，以后会慢慢学习。很多时候缩略图都是生成的图片，大幅图片直接缩小感觉会比较糟糕。

但是IE6会像标准浏览器解释min-width（min-height）一样解释width（height），所以可以利用IE6不能识别的!important或者其他IE6不能识别的高级选择符来hack：

#selector{
min-width:100px;
width:auto !important;/*IE6区分无法识别*/
width:100;
}

#selector{
min-width:100px;
width:100;
}
html>body #slector{/*IE6区分无法识别-IE7?*/
height:auto;
}

因为IE6把width/height处理了min-width/min-height，所以max-width/max-height没办法这样做了，所幸IE有自己的私有属性expressions，但是这个东西严重影响浏览器性能，但是还是摘来看看：

/*写给 IE6 的max-width*/
* html div.max-width {
  width: expression(document.body.clientWidth > 499 ? "500px" : "auto");
}
/*写给标准浏览器的 max-width*/
div.max-width {
  max-width: 500px;
}

max-width

/*写给 IE6 的max-height*/
* html div.max-height {
  height: expression(this.scrollHeight > 499 ? "500px" : "auto");
}
/*写给标准浏览器的 max-height*/
div.max-height {
  max-height: 500px;
}

max-height

高级选择符可参考之前的一些文章

xx浮动

首先我们来看看什么时候会遇到这个问题，来看初始的html结构和css（下面的测试将会在Firefox3.5以及IETester中的IE6和win系统版IE8/IE7兼容模式进行）：

body{
color:#da444f;/*为了让字变色*/
}
*{
margin:0;
padding:0;/*一个小小的cssReset*/
}
.wrap{
border:1px solid #da444f;
background:#e4faff;
width:350px;/*添加不添加这个宽度呢，先填上*/
padding:10px;/*添加这个是为了边框和内容有点点距离*/
}
.column-left{
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}
.column-right{
margin-left:10px;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

此时的显示无差异，均如下图所示：

不清楚浮动是怎么样的情况：

这个样子显然不是设计所需要的，两栏布局应该是一左一右并排才是。这时候不得不添加float:left;。在添加浮动我想多做一下测试，到底会有什么不同？单在左栏添加、单在右栏添加、两栏同时添加。

先看单在左栏添加的状况，此时左栏样式添加了float:left：

.column-left{
        float:left;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

这时候IE6显示如下：

IE7显示如下：

IE8和FF3.5显示和相同，如下：

可以看出IE67那抽风的样子，xx不可理喻，其他结论先不提。
下面再测试单在右栏添加float:left;：

.column-right{
        float:left;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

这次IE6显示如下：

（这里插播一则国际新闻：这个刚才为什么为什么这个和下面的不一样，包括刚才那个，其实呢，这个也是前文提到的双边距bug，这里只要在column-right加上display:inline;就可以解决了）
IE7显示：

IE8和FF3.5显示相同（实际上文字的字母的距离以及IE文字毛茸茸的样子是因为IE对字体进行了特殊的处理），如下

下面将测试左右栏都添加float:left;的情况：

IE6/7显示相同为：

IE8/FF显示为：

———————-休息一下，来个分割线———————-

有同学好奇的发现：在没有添加任何xx浮动的情况下，IE6/7显示的是正确的！只有FF3.5/IE8才有问题！这是因为另外一个应该被人知道的微软私有属性hasLayout搞的鬼。这里简单的介绍下：IE67支持这个东西，这个属性会被一些诸如width:*px的属性xx，xx这个东西IE会突然听话很多，更多介绍先推荐一篇翻译文章，其他的请看参考文章。这个属性到IE8就不支持了，所以上边{zh1}的测试显示IE8,FF得到了我们预料的悲剧。我开始为了截图方便在.wrap添加了width:350px的属性。

下面再来看看没有这个width:350px的时候，左右都不添加浮动的情况，样式如下：

body{
color:#da444f;/*为了让字变色*/
}
*{
margin:0;
padding:0;/*一个小小的cssReset*/
}
.wrap{
border:1px solid #da444f;
background:#e4faff;
/*此处去掉width:350px*/
padding:10px;
}
.column-left{
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}
.column-right{
margin-left:10px;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

浏览器均显示为：

此时右栏在IE6并没有出现双边距问题，因为它不是浮动元素，其他单栏测试省略。
再来测试双栏添加float:left;wrap不设宽度，浏览器均如下所示：

再来测试双栏添加float:left;不设wrap宽度不设wrap内边距：（这样对比下，更直观）

说了这么多，自己越来越清晰，但不知道这样能不能讲明白，但是测试浮动会出很多状况。所以，传说浮动会产生一堆变态问题，那{jd1}是个事实！这个时候就会遇到怎么处理这些浮动的问题了。

解决方案——怎么xx浮动：

xx之后如图所示：

附加标签

W3C推荐的方法就是这个方法，这个方法在浮动元素末尾添加一个空标签：

或者div之类的也可以

这样添加额外的结构，如果不介意有些多余的结构也不会有任何问题。

clearfix

将下面代码写入css，在包含content的div加入clearfix：

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix { display: block; }
/* End hide from IE-mac */

像下面这样