浏览器常见的css Bug以及解决办法【转】

1、不同浏览器的标签默认的margin和padding不同

问题描述：随便写几个标签，在不加样式控制的情况下，各自的margin和padding值差异较大。

解决方案：可以再css里面加上样式reset即 *{margin:0;padding:0;}

更好的解决方案：考虑到性能问题，用具体的标签代替通配符*，比如：body,div,img,ul,li{margin:0;padding:0;}
2、ie6下块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题描述：在ie6下，我们经常看到类似于楼梯的效果，即块后面的元素块被挤在了下一行。

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性。
备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

3、 居中布局

问题描述：当我们在container块中将content块居中布局，常用margin: Npx auto;在ie6下会发现content块没有居中，反而居左对齐了。

解决方案：在父元素container中使用 text-align: center 属性，而在元件content中使用 text-align: left 。
4、 float元件的两倍空白

问题描述：当我们设置元素的margin-left:30px的时候，ie下实际显示出来的左边距为60px；

解决方案：设置 display: inline 属性。
5、 设置较小高度标签（一般小于10px），在IE中显示的高度超出自己设置高度

问题描述：IE中标签的高度不受控制，超出自己设置的高度。比如你设置了height:2px;发现IE显示的高度超过2px;

解决方案：使用overflow:hidden。
备注：这个BUG的产生原因很简单，IE不允许元件的高度小于字体的高度。

6、 图片默认间距

问题描述：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题1中提到的通配符也不起作用。

解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float即可。

7、 标签最低高度设置min-height不兼容

问题描述：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

解决方案：如果我们要设置一个#element元素的最小高度200px，需要进行的设置为：#element{min-height:200px; height:auto !important; height:200px; }

或者

#element { min-height: 150px; height: 150px;}

html>body #element {height: auto;}
8、 在list中的空行

问题描述：当我们通过如下方式，会发现li元素之间会产生空行。

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

解决方案：为 li 加上display: inline

9、 奇数宽高 bug

问题描述：在相对定位和绝对定位下，当外层相对定位的宽度或高度是奇数时，会产生这个 bug

解决方案：将外层相对定位的 div 宽高改为偶数即可。
另外还有就是ie6、7怪异模式下的盒子模型与标准盒子模型的区别；

更多的拓展阅读见《目前比较全面的浏览器CSS BUG兼容汇总》

最后：参考了很多网络上的文章，本人仅做了相关的整理以及部分改动，非原创。