不一樣瀏覽器兼容性的區別

常見的瀏覽器兼容性問題與解決方案大體有如下九種形式： 

　　1、不一樣瀏覽器的標籤默認的外邊界和內填充不一樣

　　問題表現：不加樣式控制下，margin和padding差別較大

　　解決方案：css裏 *{margin:0; padding:0;}

　　備註：這是最多見也是最易解決的一個兼容問題，幾乎全部的css文件開頭都會用通配符*來設置各個標籤外邊界和內填充爲0

 

　　2、塊屬性標籤float後，又有橫向的margin狀況下，在IE6顯示margin比設置的大

　　問題表現：IE6後面的一塊被頂到下一行

　　解決方案：在float的標籤樣式控制中加入display:inline;轉化爲行內屬性

　　備註：橫向浮動的div佈局，使用上margin進行邊界設置時，必然會碰到此問題

 

　　3、設置較小高度標籤(通常小於10px)，在IE六、IE7，遨遊中高度超出設置高度值

　　問題表現：IE六、7和遨遊裏這個標籤的高度不受控制，超出本身設置的高度

　　解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height小於你設置的高度

　　備註：通常出如今設置小圓角背景的標籤裏。出現該問題緣由是IE8以前的瀏覽器都會給標籤一個最小默認行高的高度，即便標籤是空內容，標籤的高度仍是會有默認行高。

 

4、行內屬性標籤，設置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。

 

　　5、圖片默認有間距

　　問題表現：幾個img標籤放在一塊，有些瀏覽器會有默認的間距，有通配符也不起做用

　　解決方案：使用float屬性爲img佈局

　　備註：img標籤是行內屬性標籤，只要不超出容器高度，img會排在一行裏，使用float是比較好的選擇

 

　　6、標籤最低高度設置min-height不兼容

　　問題表現：min-height自己就是一個不兼容的css屬性，因此設置min-height時不能兼容全部瀏覽器

　　解決方案：若是設置一個標籤最小高度爲200px，須要進行設置 {min-height:200px; height:auto !important; 
height: 200px; overflow:visible;}

　　備註：b/s系統前端時，當內容小於一個值時，容器的高度保持該值，當內容大於該值時，高度自適應且不出現滾動條。

　　7、光標手形

　　問題表現：firefox不支持hand，但ie支持pointer

　　解決方案：統一使用cursor:pointer;

 

　　8、字體大小定義不一樣

　　問題表現：對字體大小small定義不一樣，Firefox爲13px，而IE爲16px，差異比較大

　　解決方法：使用指定的字體大小如14px或者使用em

 

　　9、IE6 3px bug

　　問題表現：左側div浮動left，右邊DIV能夠接着橫向排列，造成典型一列固定，第二列自適應，IE6出現之間3px間隙

　　解決方法：對左側left的盒子補上_margin-right: -3px;