本文有部分是从别的大神博客看来的，有部分是自己平时遇到的 ，一并写下来，当然肯定是不全的，欢迎大家补充
1、首先是div居中问题，通常写法为
<!DOCTYPE html>
<head>
<style type='text/css'>
#first {
margin:0 auth;
width:100px;
height:200px;
background-color:blue;
}
</style>
</head>
<body>
<div id='first'>
</div>
</body>上述代码在chrom下IE7 等是正常居中的，如图：
然而上述代码在混杂模式下却失败了
解决办法是外加层div style定义为：text-align:center,问题解决
2.我们在许多css文件的开头经常会见到这么一段文字
* {
margin:0;
padding:0;
}
这个是css reset，出现这个的原因是因为浏览器对标签的默认支持不同(我记得好像是IE默认的margin是10px吧，记不清楚了)，所以我们要统一，下面粘贴一段来自其它博客的淘宝css reset
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }3.关于div的高度不能小于10px
<div style='height:3px;background:red;width:200px;'></div>
这段代码在chrome或者IE7等下正常显示就是一条细线，然而在IE6以及其它混杂模式下，将变为10px;
网上百度了下，解决办法不外乎两个：
一个是设置font-size；另一种是设置overflow属性
<div style="height:3px;overflow:hidden;background:red;width:208px;"></div>
<div style="height:3px;font-size:3px;background:red;width:208px;"></div> 4.上下margin重合问题，这个不是兼容性的问题，以为不管是在chorme上还是IE上都会出现问题，相邻的两个div margin-left margin-right不会重合
但是相邻的margin-top margin-bottom会重合
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
.box{width: 200px;height: 200px; border: 1px solid #333; }
.first{margin-top: 10px;}
.second{margin-bottom: 10px;}
</style>
</head>
<body>
<div class="box second"></div>
<div class="box first"></div>
</body>
</html>
也就是说这个并不是加和的关系，而是取最大的值来做，如果margin-top:20px margin-bottom:10px 则去20px
5.从别处拷贝来的，真实性未测试
IE6双边距bug: 块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。其实这种问题主要就是会把某些元素挤到了第二行
<style type="text/css">
html,body,div{ margin: 0;padding: 0;}
.wrap{width: 200px; height: 200px; border: 1px solid #333;}
.box{float: left; /* display:inline */ ;margin-left: 10px; width: 80px; height: 80px; background-color: green;}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
</div>
<script type="text/javascript">
</script>
</body>IE6左边上边距：
IE7没有问题：
解决方式有两个
1、给float元素添加display:inlilne即可正常显示
2.hack处理，对IE6进行——margin-left:5px;
相似问题：也属于IE双边距bug:行内属性标签，为了设置宽高，我们经常互设置为display:block，这样一来就会产生上述问题，解决办法也是添加display:inline，这样一来不能设置宽高了，所以呢需要在添加display:table
7、应该不算是兼容性问题吧，但是也是关于CSS的，问题描述；有时候图片周围会出现间隙：
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div>
<div style=''><img src="Hydrangeas.jpg" style='height:50px;width:50px;'/>
<span >hello</span>
</div>
</body>
</html>
hello和前面的图之间有间隙，解决方案：父类中设置font-size:0px，然后再设置字体打下
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div>
<div style='font-size:0px;'><img src="Hydrangeas.jpg" style='height:50px;width:50px;'/>
<span style='font-size:12px;'>hello</span>
</div>
</body>
</html>
问题解决
下面的这些是针对常见的问题的一些解决办法
8.关于css透明度设置，普通浏览器设置的 时候直接设置为opacity:0.7即可，但是这个在IE浏览器下却不起作用，IE浏览器设置为filter:alpha(opacity=70)
9.消除ul ol等列表的缩进，
样式应该写成：list-stytle:none;margin:0px;padding:0px;其中margin属性对IE有效，padding对Firefox有效
其他还有的欢迎大家补充~~~~~
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
