常见浏览器兼容性问题及解决方案

常见浏览器内核

市场上浏览器种类很多，不同浏览器对网页的解析存在一定差异。浏览器内核主要分为两种，一是渲染引擎，另一个是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，每个子元素再单独设置字体大小（推荐）