网页布局中IE6.0以下版本常见的bug汇总

现在浏览器世界，什么都在升级，兼容性越来越好，布局出来的效果也很炫，可是有时候我们又不得不抱怨，有很多的人就像博物馆里的古董一样，不喜欢改旧换新，一直沿用着老版本的浏览器，给我们程序员带来了很大的麻烦，麻烦的不是他们换浏览器，而是浏览器里的BUG，让我们很头疼，这不，我现在就遇到了好多的问题，在火狐、苹果、谷歌等浏览器都目测正常，到了IE，哇呀。。。。惨目忍睹，怎么这样了呀，其他浏览器不是好好的吗？好吧，微软的比较特殊，不想改，但又不得不改，市场占有率IE仍然是龙头老大呀，必须考虑一下它的感受，改吧！以下是常见的IE bug:

bug1、居中问题

css代码：

#main{
   margin:0 auto;
   980px;
   height:500px;
   background:#f00;
}

HTML代码：

<!doctype html>
<html>
<head>document title</head>
<title></title>
<head>
<body>
<div id="main"></div>
</body>
</html>

就是这样的代码，在如今主流浏览器都测试通过，以及IE6.0以上版本的浏览器也可以正常通过，可是一到了IE6.0及IE6.0以下版本，哇呀，都靠右了，怎么弄都不好使。怎么办呢？解决办法有二：

方法一、加入DTD文档头，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<xmlns="http://www.w3.org/1999/xhtml">

加了上面这段，则浏览器会根据W3C的标准去解释和渲染，解决了IE中不居中的问题。

方法二、在body的css样式中加入下面代码：

body{
   text-align:center;
}

加入以上代码，则在IE6.0以下版本都会将body体里的内容全部居中。

bug2、双倍margin问题

问题描述：元素设置float后，不管是左浮动还是右浮动，margin边距是定义数值的两倍。

CSS代码如下：

#main{
   float:left;
   margin-left:30px;
   400px;
   height:400px;
   background:#eee;
}

期望的结果是离左边的边距是30px;而在IE6.0版本以下的的结果却出现了60px。

解决办法：

在CSS样式表中加入代码：

_display:inline;

以上这段代码只有IE版本的浏览器才能识别，这样就解决了双倍margin的问题，也不影响其他浏览器上的显示效果。

bug3、子DIV设置浮动后，父DIV自适就高度失效。

解决办法有以下三种，常用的有以下两种。

(1)设置父DIV的CSS代码为如下：

#main{
   overflow: hidden;
   zoom:1;
}

(2)设置父DIV的CSS代码如下：

#main{
   clear:both;
}

(2)新增一个子DIV并设置该DIV的CSS代码为如下：

#main{
   clear:both;
   overflow:hidden;
   0px;
   height:0px;
}

4、设置min-height和min-width，IE忽略了min-height。

解决办法：

（1）这个fix由 Dustin Diaz提供。其利用了 !important 下面是代码片段，我是从网上截取下来的，具体还没遇到过：

css代码如下：

#main {
   min-height:150px;
   height:auto !important;
   height:150px;
}

1.
2.
3.
4.
5.

（2）代码如下

#main {
   min-height: 150px;
   height: 150px;
}
html>body #main {
   height: auto; 
}

5、Fixing the Broken Box Model

IE曲解了“盒子模子”可能是最不可原谅的事情了。IE 6 这个半标准的浏览器回避了这个事情，但这个问题还是会因为IE运行在“怪异模式”下出现。
两个Div元件。一个是有fix的，一个是没有的。而他们不同的高和宽加上padding的总合却是不一样的。

解决办法：

#main{
   400px;
   height:100px;
   padding:50px;
}

#main{
    400px;
   height: 150px;
   height: 250px;
    500px
}

是的，以上这段代码就是告诉浏览器你要原来的长和宽上加上了padding。但这个fix只会作用于IE了的“怪异模式”，所以你不需要担心在IE6的正常模式下会有问题。

6、3像素margin问题。

先看一下代码：

HTML代码：

<div class="bro1">div1</div>
<div class="bro2">div2</div>

CSS代码：

<style type="text/css">
    .bro1{
        float: left;
        200px;
        height:200px;
        background: pink;
    }
    .bro2{
         200px;
        height: 200px;
        background: silver;
    }
</style>

主流浏览器运行效果图如下：

网页布局中IE6.0以下版本常见的bug汇总

而IE6.0版本以下的效果图如下，出现了3像素margin:

网页布局中IE6.0以下版本常见的bug汇总

由以上现象可以说明，3像素margin是由开发者书写不规范所造成，解决方法可以设置两DIV都为浮动就可以了，代码如下：

<style type="text/css">
    .bro1{
        float: left;
        200px;
        height:200px;
        background: pink;
    }
    .bro2{
        float: left;
         200px;
        height: 200px;
        background: silver;
    }
</style>

以上就是我工作中遇到的BUG，还有很多，只是我还没遇到，如果大家有遇到，请一起交流一下，如我遇到新的BUG，我会继续补充上去。

哥们些，赶快抛弃IE7以下的吧！不要再做“古董”了。。。