浏览器兼容性问题，是指因为不同浏览器对同一段代码有着不同的解析，所造成页面显示效果不统一的情况。

浏览器兼容性问题，是指因为不同浏览器对同一段代码有着不同的解析，所造成页面显示效果不统一的情况。

主流浏览器内核：

苹果Safari和谷歌Chrome的Webkit内核
微软IE浏览器的Trident内核
Firefox浏览器的Gecko内核
Opera浏览器的Presto内核

不同内核代表着浏览器的渲染引擎不同，而渲染引擎又是负责取得网页内容（HTML、XML、图像）、整理信息（加入CSS样式等），以及计算网页显示方式，然后输出至显示设备的关键。

常见兼容问题：

1. ie中浮动产生双倍距离
2. 元素初始边距不一致，必须进行样式初始化设置（解决方法：在样式表的开头用通配符设置内外边距为0）
3. 几个img标签放一块时会自动产生边距，即使用margin和padding设置为0也不行（解决方法：为img标签添加float可去除边距）
4. 文本和输入框对齐设置（解决方法：使用vertical-align:middle;）
5. 一行内容过多需显示为省略号（解决方法：li{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}）
6. IE6、7、8对css的兼容处理
   所有浏览器通用：height:100px;
   IE6专用：_height:100px;
   IE7专用：*+height:100px;
   IE6、IE7共用：*height:xxpx
7. 常见的css hack写法
   (什么是CSS hack? 答：由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!)

解决办法

方式一 条件注释法

只在IE下生效
<!--[if IE]>这段文字只在IE浏览器显示<![endif]-->
只在IE6下生效
<!--[if IE 6]>这段文字只在IE6浏览器显示<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>这段文字在非IE8浏览器显示<![endif]-->
非IE浏览器生效
<!--[if !IE]>这段文字只在非IE浏览器显示<![endif]-->

方式二 前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
*html *前缀只对IE6生效 *+html *+前缀只对IE7生效 @media screen\9{...}只对IE6/7生效 
@media \0screen {body { background: red; }}只对IE8有效 
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效 
@media screen\0 {body { background: green; }} 只对IE8/9/10有效 
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效 等等
css3属性兼容处理
Firefox下加  -moz-
Webkit内核浏览器加   -webkit-
Opera浏览器加    -o-
IE浏览器加   -ms-