前端浏览器兼容知识点整理

　作前端，总会涉及到浏览器兼容的问题，之因此存在浏览器兼容的问题，是由于各个浏览器的内核不一样，相对应的同一套代码，不一样的浏览器解析后，所呈现的页面效果也会存在必定的差别。

一 浏览器内核差别

　　咱们先来了解一下各个浏览器的内核（渲染引擎）：

　　Trident(IE内核)：

　　　　IE六、IE七、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）、360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）猎豹极轻浏览器，360极速浏览器（7.5以前为Trident+Webkit，7.5为Trident+Blink）猎豹安全浏览器（1.0-4.2版本为Trident+Webkit，4.3及之后版本为Trident+Blink）猎豹极轻浏览器，傲游浏览器（傲游1.x、2.x为IE内核，3.x为IE与Webkit双核）、百度浏览器（早期版本）、世界之窗浏览器^[2]  （最初为IE内核，2013年采用Chrome+IE内核）、2345浏览器、腾讯TT、淘宝浏览器、采编读浏览器、搜狗高速浏览器（1.x为Trident，2.0及之后版本为Trident+Webkit）、阿云浏览器（早期版本）、瑞星安全浏览器、Slim Browser、 GreenBrowser、爱帆浏览器（12 以前版本）、115浏览器、155浏览器、闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器（iPhone/iPad/Android）、UC浏览器（Blink内核+Trident内核）等。

　　Gecko(Firefox内核)：

　　　　Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon。

　　Presto(Opera前内核) (已废弃)：

　　　　Opera12.17及更早版本曾经采用的内核，现已中止开发并废弃。

　　Webkit(Safari内核,Chrome内核原型,开源)：

　　　　傲游浏览器三、^[1]  Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器。

　　Blink：

　　　　这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，而且在Chrome（28及日后版本）、Opera（15及日后版本）和Yandex浏览器中使用。

　　浏览器内核的区别，咱们只作了解便可，感兴趣的同窗，能够本身去搜搜啊~

二 兼容问题处理细则

　　一、浏览器默认会有一些本身独有的属性，像内外边距啦，图片边框啊、input自带的样式啊等等，当咱们用到这些标签及样式时，就须要手动的清楚浏览器默认样式，好比清除补丁和边距：*{margin:0;padding:0;}，像这样使用通配符强制将补丁和边距置为零，简单粗暴，可是这样处理比较消耗性能，我通常倾向于使用一些CSS样式重置库，常见的有如下几种，你们能够根据实际需求来选择：

　　Neat.css：解决Bug，特别是低级浏览器的常见Bug；统一效果，但不盲目追求重置为0；向后兼容；考虑响应式；考虑移动设备。

　　　　　　　http://thx.github.io/cube/doc/neat

　　Reset.css：对浏览器样式的重置（杀伤力偏大）

　　　　　　　  http://meyerweb.com/eric/tools/css/reset/

　　Normalize.css：修复浏览器样式

　　　　　　　　　　https://yuilibrary.com/yui/docs/cssnormalize/

　　除了这些，你们还能够借鉴百度、淘宝的样式重置表。

---

　　二、块级元素浮动后，又使用margin来控制相邻块级元素的间距的状况下，在IE6下，margin值要比咱们设置的值大，这样，后面浮动的元素就会被挤到下面去，解决方案是：将浮动的块级元素的display属性值设为inline-block。

---

　　三、设置标签的高度小于10px的时候，在IE6，IE7，遨游中标签的高度会超出本身设置高度。解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

---

　　四、行内属性标签，设置display:block后采用float布局，又有横行的margin的状况，ie6间距bug。解决方案：在display:block;后面加入display:inline;display:table;。

---

　　五、几个img标签放在一块儿的时候，有些浏览器会有默认的间距。解决方案：使用float属性为img布局。

---

　　六、min-height设置标签最小高度的时候不兼容。解决方案：若是咱们要设置一个标签的最小高度200px，须要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

---

　　七、CSS Hack技巧

　　条件注释法：

　　　　<!--[if !IE]><!--> 除IE外均可识别 <!--<![endif]-->
　　　　<!--[if IE]> 全部的IE可识别 <![endif]-->
　　　　<!--[if IE 6]> 仅IE6可识别 <![endif]-->
　　　　<!--[if lt IE 6]> IE6以及IE6如下版本可识别 <![endif]-->
　　　　<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
　　　　<!--[if IE 7]> 仅IE7可识别 <![endif]-->
　　　　<!--[if lt IE 7]> IE7以及IE7如下版本可识别 <![endif]-->
　　　　<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
　　　　<!--[if IE 8]> 仅IE8可识别 <![endif]-->
　　　　<!--[if IE 9]> 仅IE9可识别 <![endif]-->

　　类内属性前缀法+选择器前缀法：

　　　　在标准模式中：

　　　　“-″减号是IE6专有的hack
　　　　“\9″ IE6/IE7/IE8/IE9/IE10都生效
　　　　“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
　　　　“\9\0″ 只对IE9/IE10生效，是IE9/10的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有效

　　代码示例：

.csshack {
    width: 100px;
    height: 100px;
    background-color: green;/* 所有识别 */
    .background-color: #ccc\9;/*IE六、七、8识别*/
    +background-color: #fff;/*IE六、7识别*/
    _background-color:#1e0bd1;/*IE6识别*/
}
.csshack, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及如下 识别 */
@-moz-document url-prefix(){.csshack{background-color:#00ff00;}}/* 仅firefox 识别 */
* +html .csshack{background-color:#a200ff;}/* 仅IE7 识别 */
@media screen and (-webkit-min-device-pixel-ratio:0){.csshack{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
@media all and (min-width: 0px){ 
    .csshack{
        background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/ 
        background-color:#4cac70\0;/* 仅 Opera 有效 */ 
        }
    }

---

　　八、!important

　　在ie6下，同一个大括号里对同一个样式属性定义，其中一个加important 则important标记是被忽略的，例：{background:red!important; background:green;} ie6下解释为背景色green，其它浏览器解释为背景色red；若是这同一个样式在不一样大括号里定义，其中一个加important 则important发挥正常做用，例：div{background:red!important} div{background:green}，这时全部浏览器统一解释为背景色red。

---

　　九、点击超连接后，hover、active样式不生效。解决方案，css属性排列为L-V-H-A。

---

 

　　十、给块级元素设置高度高度的时候，最好也同时设置上line-height属性值。

---

　　十一、去除超连接虚线边框的问题。当点击超连接时，ff、ie六、ie七、ie8会出现虚线边框。

　　　　解决方案：ie6/7中 设置为a {blr:expression_r(this.onFocus=this.blur()) }

　　　　　　　　　ie8 和 ff 都不支持expression 在ie8 、ff中设置为  :focus { outline: none; }

---

　　十二、css滤镜的问题：ff、safari、chrome、opera使用opacity属性，ie使用设置filter:alpha(opacity=50)时，ie6/7失效，还要设置zoom:1width:100%。

---

　　1三、IE8不兼容Bootstrap框架的解决方案。

　　　　引入respond.min.js库，兼容响应式布局。不过须要注意的是，这个库不能放在本地路径下（Fill://），要用静态资源连接或者放在服务器上才能生效。

---

　　1四、不兼容H5标签的解决方法：引入html5shiv.min.js文件。

---

　　1五、不兼容rem单位的解决方法：引入html5shiv.min.js文件。引入rem.min.js文件，不过这个文件的引入位置要放在页面最下方。

---

　　1六、IE8下，父级div或者兄弟div有浮动或定位属性的时候，div模块设置背景颜色会失效，或者div自己有浮动属性，设置背景色也可能会失效，此时注意布局的方法，我遇到过的是第一种状况，个人解决方法时给父级div设置相对定位，相邻div不设置定位或浮动，自己使用绝对定位，到想要去的位置，可让背景颜色生效。

---

　　在制做页面的时候，咱们都会遇到各类各样的问题，可是代码规范，遵循你们都使用的准则，兼容的问题就能少一些，这里只列举了一部分，之后有其余的内容我也会继续补充~