本文有部分是從別的大神博客看來的，有部分是自己平時遇到的 ，一并寫下來，當然肯定是不全的，歡迎大家補充
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:行內屬性標簽，為了設置寬高，我們經?；ピO置為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有效其他還有的歡迎大家補充~~~~~
新聞熱點
疑難解答
