常見浏覽器相容性問題及解決方案

常見浏覽器核心

市場上浏覽器種類很多，不同浏覽器對網頁的解析存在一定差異。浏覽器核心主要分為兩種，一是渲染引擎，另一個是JS引擎，這邊所說的核心更傾向于渲染引擎。

常見的浏覽器核心有：Trident、Gecko、Blink、Webkit

IE浏覽器：Trident

Chrome浏覽器：Webkit(<28)，Blink(>=28)

Firefox浏覽器：Gecko

Safari浏覽器：Webkit

Opera浏覽器：Blink

360浏覽器：Trident+Webkit雙核心

QQ浏覽器：Trident+Webkit雙核心

常見的相容性問題

CSS：

1. 不同浏覽器的标簽的預設外邊距（margin）和内邊距（padding）不同

   解決方案：css添加通配符設定margin和padding為0px

   * {
    	margin: 0;
    	padding: 0;
    }
              

2. IE6下浮動元素margin存在雙倍邊距

   解決方案：設定元素為行内樣式

   {
   	display: inline;
   }
              

3. min-height屬性部分浏覽器不相容

   問題描述：min-height本身就是一個不相容CSS屬性，是以不能很好地被各個浏覽器相容

   解決方案：

   {
   	 min-height: 200px;
   	 height: auto!important;
   	 height: 200px; 		/* 相容IE6 */
   	 overflow: visible;
   }
              

4. 老版浏覽器不相容CSS3屬性opacity

   解決方案：

   {
     filter: alpha(opacity=50);/*IE*/
     -moz-opacity: 0.5;		/*老版Mozilla*/
     -khtml-opacity: 0.5;		/*老版Safari*/ 
     opacity: 0.5;
   }
              

5. Chrome下12px以下的文本強制顯示為12px大小

   解決方案：

   -webkit-text-size-adjust:none;

6. IE中盒子模型的寬高計算方式與W3C标準不同

   問題描述：

   IE中盒子模型：元素的width或height =(content + border + padding)，

   W3C标準盒子：元素的width或height = content

   是以在設定了盒子的固定寬高時W3C标準盒子的占據的位置是大于IE盒子的

   

   

   解決方案：

   {
   	/* IE中設定使用W3C标準的方式繪制 */
   	box-sizing:content-box;
   	/* 使用W3C标準的浏覽器中設定，以IE的方式繪制 */
   	box-sizing:border-box
   }
              

7. 行内元素之間存在空隙

   問題描述：渲染引擎在遇到無法解析的字元時*(标簽之間的換行)*會以預設字型大小顯示空格。

   解決方案：

   1. 書寫HTML時多個行内元素寫在一行
   2. 父容器設定樣式

      font-size:0

      ，每個子元素再單獨設定字型大小（推薦）