常見的瀏覽器兼容性問題與解決方案大致有以下九種形式：
一、不同瀏覽器的標簽默認的外邊界和內填充不同
問題表現：不加樣式控制下，margin和padding差異較大
解決方案：css里 *{margin:0; padding:0;}
備注：這是最常見也是最易解決的一個兼容問題，幾乎所有的css文件開頭都會用通配符*來設置各個標簽外邊界和內填充為0
二、塊屬性標簽float后，又有橫向的margin情況下，在IE6顯示margin比設置的大
問題表現：IE6后面的一塊被頂到下一行
解決方案：在float的標簽樣式控制中加入display:inline;轉化為行內屬性
備注：橫向浮動的div布局，使用上margin進行邊界設置時，必然會碰到此問題
三、設置較小高度標簽(一般小於10px)，在IE6、IE7，遨游中高度超出設置高度值
問題表現：IE6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度
解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height小於你設置的高度
備注：一般出現在設置小圓角背景的標簽里。出現該問題原因是IE8之前的瀏覽器都會給標簽一個最小默認行高的高度，即使標簽是空內容，標簽的高度還是會有默認行高。
四、行內屬性標簽，設置display:block后采用float布局，又有橫向的margin情況，IE6間距bug
問題表現：IE6的間距比超過設置的間距
解決方案：在display:block;后面加入display:inline;display:table;
備注：行內屬性標簽，為了設置寬度，需要設置為display:block;(表單元素除外)在用float布局且有橫向margin后，在IE6下，就具有了塊屬性float后的橫向margin的bug。由於設置為display:inline，高度失效，所有在后面補上display:table。
五、圖片默認有間距
問題表現：幾個img標簽放在一塊，有些瀏覽器會有默認的間距，有通配符也不起作用
解決方案：使用float屬性為img布局
備注：img標簽是行內屬性標簽，只要不超出容器高度，img會排在一行里，使用float是比較好的選擇
六、標簽最低高度設置min-height不兼容
問題表現：min-height本身就是一個不兼容的css屬性，所以設置min-height時不能兼容所有瀏覽器
解決方案：如果設置一個標簽最小高度為200px，需要進行設置 {min-height:200px; height:auto !important;
height: 200px; overflow:visible;}
備注：b/s系統前端時，當內容小於一個值時，容器的高度保持該值，當內容大於該值時，高度自適應且不出現滾動條。
七、光標手形
問題表現：firefox不支持hand，但ie支持pointer
解決方案：統一使用cursor:pointer;
八、字體大小定義不同
問題表現：對字體大小small定義不同，Firefox為13px，而IE為16px，差別比較大
解決方法：使用指定的字體大小如14px或者使用em
九、IE6 3px bug
問題表現：左側div浮動left，右邊DIV可以接着橫向排列，形成典型一列固定，第二列自適應，IE6出現之間3px間隙
解決方法：對左側left的盒子補上_margin-right: -3px;