浏览器兼容问题汇总

1.不同浏览器的margin padding默认值不同

解决方案：设置   *{margin:0;padding:0;}

2.设置高度小于10px的标签，在IE6中显示的高度为IE6默认的最小高度，一般都大于10px。

解决方案：设置该标签overflow:hidden；或设置line-hight为你设置的高度。

3.img标签存在默认间距问题(所有浏览器)

解决方案：为img设置float；

4.min-height min-width在IE6失效问题

解决方案：针对IE6，可以使用{width:auto !important; width:200px; overflow:visible;}解决问题，此代码对其它浏览器无效。

5.IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。

解决方案：设置display:inline;

6.IE和火狐ul的默认边距问题：IE中ul默认边距是margin，火狐中ul默认边距是padding

解决方案：ul{ padding:0px; margin:0px;}

7.IE6下3px问题

解决方案：设置仅有IE6能读懂的css如{_margin-left:-3px;}

8.在IE6下，即便给父元素设置了固定高度，也会被子元素撑大

解决方案：设置父元素 overflow:hidden;

9.遮罩问题，一般设置遮罩的宽度和高度都为100%，但这种情况只能遮住当前可视区，如果页面有上下滚动条，滚动后会发现下面并没有被遮住。

解决方案：使用jquery脚本载入遮罩，示例代码如下：

<script>
$(document).ready(function(){
$(".over").height($(document).height());
$(".confirm").css("left",($(document).width()-($(".confirm").width()))/2+"px");
});
</script>css代码如下

.div{ width:100%; height:1200px; border:1px solid red; position:absolute; margin:0; padding:0; left:0; top:0;}
.over{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
background-color:#7E9898;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
.confirm{
position:absolute;
width:400px;
height:300px;
background:black;
top:200px;
margin:auto;
}html代码如下

<div class="div">hehehehhehehe</div>
<div class="over"></div>
<div class="confirm"></div>