1. 不同瀏覽器的標籤默認外補丁margin和內補丁padding不同
發生概率：100%
解決方案：使用CSS通配符*，設置內外補丁爲0
*{ margin: 0; padding: 0;}
2. 塊屬性標籤float之後，又有橫向的margin值，在IE6中顯示會比設置的大（IE6雙邊距bug）
發生概率：90%
解決方案：在float標籤樣式控制中加入display:inline;
3. 設置較小的高度標籤（一般小於10px），在IE6，IE7，遨遊中超出自己設置的高度
發生概率：60%
解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height小於你設置的高度。
4. 行內標籤設置display:block;後又採用float佈局，再設置橫向margin值時，在IE6中顯示會比設置的大（IE6雙邊距bug）
發生概率：20%
解決方案：在display:block;後面加上display:inline;display:table;
5. 圖片默認有間距
發生概率：20%
解決方案：使用float爲img佈局
6. 標籤最低高度設置min-height不兼容
發生概率：5%
解決方案：例如要設置一個標籤的最小高度爲200px
{ min-height: 200px;
height: auto!important;
height: 200px;
overflow: visible;}
7. 透明度兼容設置
發生概率：主要看你要寫的東西設不設透明度
解決方案：一句話
transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
opacity:0.5; This is the “most important” one because it is the currentstandard in CSS. This will work in most versions of Firefox, Safari, andOpera.This would be all you need if all browsers supported current standards. Which,of course, they don’t.
filter:alpha(opacity=50); This one you need for IE.
-moz-opacity:0.5; You need this one to support way old school versions of theMozilla browsers like Netscape Navigator.
-khtml-opacity:0.5; This is for way old versions of Safari (1.x) when therendering engine it was using was still referred to as KTHML, asopposed to thecurrent WebKit .
8. Box Model的bug
描述：給一個元素設置了高度和寬度的同時，還爲其設置margin和padding的值，會改變該元素的實際大小。
解決辦法：在需要加 margin和padding的div內部加一個div,在這個div裏設置margin和padding值。
9. IE6中的列表li樓梯狀bug
描述：通常在li中的元素（比如a）設置了浮動float，但li本身不浮動。
解決辦法：
ul li{float:left;}
或 ul li{display:inline;}
10.li空白間距
描述：在IE下，會增加li和li之間的垂直間距
解決辦法：給li裏的a顯式的添加寬度或者高度
li a{width:20px;}
或者
li a{display:block;float:left;clear:left;}
或者
li {display:inline;}
li a{display:block;}
或者
在每個列表li上設置一個實線的底邊，顏色和li的背景色相同
11.overflow：auto;和position:relative的碰撞
描述：此bug只出現在IE6和IE7中，有兩個塊級元素，父元素設置了overflow：auto;子元素設置了position:relative;且高度大於父元素，在IE6-7中子元素不會被隱藏而是溢出。
解決方案：給父元素也設置position:relative;
12.浮動層的錯位
描述：當內容超出外包容器定義的寬度時會導致浮動層錯位問題。在Firefox、IE7、IE8及其他標準瀏覽器裏,超出的內容僅僅只是超出邊緣;但在IE6中容器會忽視定義的width值,寬度會錯誤地隨內容寬度增長而增長。如果在這個浮動元素之後還跟着一個浮動元素,那麼就會導致錯位問題。
解決方案：overflow：hidden;
13.IE6克隆文本的bug
描述：若你的代碼結構如下
<!--這是註釋-->
<div>
……
</div>
<!--這是註釋-->
很有可能在IE6網頁上出現一段空白文本
解決方案：
使用條件註釋
刪除所有註釋
在註釋前面的那個浮動元素加上 display：inline；
14.IE的圖片縮放
描述：圖片在IE下縮放有時會影響其質量
解決方案：img{ -mg-interpolation-mode:bicubic;}
15.IE6下png圖片的透明bug
描述：使用透明圖片,使用png24或png32圖片在IE6下面顯示圖片會有一層淡藍色的背景。
解決方案：
.img{
background:url('http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png');
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');
}
img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');}
或
<imgsrc="test.png" width="247" height="216"style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png',sizingMethod='scale');" alt="" />
16.<iframe>透明背景bug
描述：在IE瀏覽器中，<iframe>框架不會自動把背景設爲透明
解決方案：
<iframesrc="content.html"allowTransparency="true"></iframe>
在iframe調用的content.html頁面中設置
body{background-color: transparent;}
16.禁用IE默認的垂直滾動條
解決方案：
html{
overflow:auto;
}
以上是常見的兼容性問題，下面是我碰到的一些奇葩兼容性問題
1. 給光標設置自定義樣式時，靜態光標文件.cur的不同瀏覽器的兼容性問題
發生概率：反正我碰見了，在火狐瀏覽器下死活出不來，其他完美
If你寫的語句沒有問題，完全兼容。但就是有一兩個光標樣式出不來，換成其他能顯示的光標就可以正常顯示，那麼恭喜你，碰到跟我完全一樣的問題。是.cur文件的格式問題
.cur的格式根據圖片顏色深度的不同會產生不同的格式：
通過改變顏色深度，調整格式，可以實現跨瀏覽器兼容。
P.S. 因爲我不是專門搞UI的，也不太懂cur圖片，有些光標顏色深度256 colors在火狐下不識別，有些就可以，所以具體問題具體分析，都改改看，反正我這邊truecolor這個深度的是所有圖片都完全可以的兼容的。
下面會附上製作cur光標的一個小軟件RealWorldCursorEditor，可以用它來改顏色深度
cursor:url(images/arrow.cur),auto; /* auto是當自定義圖標不起作用時鼠標的狀態*/
2. IE6下躲貓貓
描述：在IE6下有些元素看起來被隱藏了，但重新刷新後會再次出現，這是由於，一個容器的高度被浮動元素撐破後面又緊跟着非浮動元素，並且這些非浮動元素有一些定義了:hover鏈接。
解決方案：各種清除浮動。
