本文有部分是从别的大神博客看来的，有部分是自己平时遇到的 ，一并写下来，当然肯定是不全的，欢迎大家补充
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有效其他还有的欢迎大家补充~~~~~
新闻热点
疑难解答
