快速处理前端PC端兼容性问题（广州中软卓越）

前端是工作需要处理多个浏览器的兼容性，好烦！怎么办？H5+C3不支持？PC端和移动端不兼容？今天中软卓越广州web前端培训课程总结一些PC端常见的兼容性处理问题

一 浏览器兼容问题的解决办法？

1、cssHACK

2、框架 html5shive，respond

3、原生js

二 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari:webkit内核

Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于webkit，Google与Opera Software共同开发)

三 有一个导航栏在chrome里面样式完好？在IE里文字都聚到一起了，是哪个兼容性问题？

答：用了display：flex属性，在ie10以下都是无效的。

四 cssHACK的方法包括哪些？

1、属性级Hack：比如IE6能识别下划线”_”和星号” * “，IE7能识别星号” * “，但不能识别下划线”_”，而firefox两个都不能认识。

2、选择符级Hack：比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

3、IE条件注释Hack：IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：，针对IE6及以下版本：，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都 会生效。

例子

#test   {   

        width:300px;   

        height:300px;   

        background-color:blue;      /*firefox*/

        background-color:red\9;      /*all ie*/

        +background-color:pink;        /*ie7*/

        _background-color:orange;       /*ie6*/    }  

        :root #test { background-color:purple\9; }  /*ie9*/

    @media all and (min-width:0px){ #test {background-color:black;} }  /*opera*/

    @media screen and (-webkit-min-device-pixel-ratio:0)

{ #test {background-color:gray;} }  /*chrome and safari*/

五 常见的兼容问题有哪些？

1、双边距BUG float引起的使用display：inline；

2、像素问题使用float引起的使用dislpay：inline -3px

3、超链接hover点击后失效 使用正确的书写顺序link visited hover active

4、Ie z-index问题给父级添加position：relative

5、Png透明使用js代码改

6、Min-height最小高度！Important解决

7、select 在ie6下遮盖 使用iframe嵌套

8、为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over：           hidden，zoom：0.08 line-height：1px）

关于快速处理前端PC端兼容性问题已经讲解完毕了。去企业，学习企业需要的编程技能！广州中软卓越web前端培训，真实企业背景，送你企业入场券！

广州中软卓越课程：http://gzetc.com.cn/