现在浏览器世界，什么都在升级，兼容性越来越好，布局出来的效果也很炫，可是有时候我们又不得不抱怨，有很多的人就像博物馆里的古董一样，不喜欢改旧换新，一直沿用着老版本的浏览器，给我们程序员带来了很大的麻烦，麻烦的不是他们换浏览器，而是浏览器里的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;
}
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版本以下的效果图如下，出现了3像素margin:
由以上现象可以说明，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以下的吧！不要再做“古董”了。。。