一、兼容性是什么？

同样的HTML CSS JS，但是外部特性还是达不到统一，有缺陷。同样的代码，有的浏览器显示“正常”，有的显示“异常”。就像吃大排档一样，有的人没东西吃，有的人会拉肚子。

二、为什么浏览器会存在兼容问题？

不同厂商使用的核心架构不一样，代码很难重叠，实现方式也不一样，所以页面呈现的风格会有一些差异，看起来会有点不一样。

三、处理兼容问题的思路：

1):要不要做？(产品的影响程度，受众，是主要效果还是基本功能)

2):到什么程度？(如果你想让那些浏览器支持，就让它们兼容。)

3):怎么做？(根据兼容性问题，选择哪些框架，哪些兼容的工具。)

四、渐进增强和优雅降级

1):渐进式增强：现在对低版本浏览器进行基本功能和页面，然后对高版本浏览器进行效果、交互和用户体验的提升。

2):优雅降级：一开始对高版本浏览器进行完整的页面显示(效果、交互、功能、用户体验)，然后兼容低版本浏览器

五、常见的兼容问题

1，高度塌陷

浮动元素的父元素是自适应的(当父元素不写高度时，子元素写浮动)，并且父元素将在高度上折叠

解决办法

1):向父元素添加声明：overflow:hidden；

2):在浮动元素下面添加一个空div。给元素一个声明，clera:两者都有；高度：0；溢出：隐藏；

2，最小高度自适应(因为min-heigh本身是一个不兼容的css属性，所以每个浏览器都是不兼容的)

1):min-height:值；-高度：值

2):min-height:值；自动！重要；高度：值

3，按钮元素大小不一样

1):统一大小的按钮

2):在外面贴一个标签，去掉标签和按钮样式中的输入框和背景

4，图片默认有间距(当几个img标签放在一起时，一些浏览器会有默认的间距)

1);向img添加浮动属性

5，ie6图片下方会产生间隙

1):设置显示；为了画面；块；

6，ie8以下的透明

填充：alpha(值范围0-100)，例如：filter:alpha(不透明度=60)

7，空div的默认行高(浮动时将使用空div，这在大多数浏览器中没有问题。即使ie6中div为空，也会有默认行高)

1)将其高度设置为0，并设置overflow:hidden。

六、一些兼容性相关的工具和库

1）html5shiv：用来解决IE9以下的浏览器无法识别HTML5新标签，CSS无法工作的问题。

2）Respond.js：是一款快速、轻量级的polyfill，用于为IE6-8等不支持CSS3 Media Queries的浏览器提供最小宽度和更大宽度的媒体查询特性，实现响应性网页设计

3）CSS Reset：重置浏览器的css默认属性；不同的浏览器对默认样式有不同的解释，通过重置可以实现一致的显示。

4）normalize.css：是一个可定制的CSS文件，它使得不同的浏览器以更统一的形式呈现网页元素。

5）Modernizr.js:的传统浏览器目前还不会完全被取代，这使得你很难将最新的CSS3或HTML5功能嵌入到你的网站中。Modernizr就是为了解决这个问题而产生的。它还可以通过加载定制脚本来模拟旧浏览器不支持的功能。