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

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

一 浏览器内核差异

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

　　Trident(IE内核)：

　　　　IE6、IE7、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内核原型,开源)：

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

　　Blink：

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

　　浏览器内核的区别，我们只做了解即可，感兴趣的同学，可以自己去搜搜啊~

二 兼容问题处理细则

　　1、浏览器默认会有一些自己独有的属性，像内外边距啦，图片边框啊、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/

　　除了这些，大家还可以借鉴百度、淘宝的样式重置表。

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

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

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

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

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

　　7、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;/*IE6、7、8识别*/
    +background-color: #fff;/*IE6、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 有效 */ 
        }
    }
复制代码

　　8、!important

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

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

 

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

　　11、去除超链接虚线边框的问题。当点击超链接时，ff、ie6、ie7、ie8会出现虚线边框。

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

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

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

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

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

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

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

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

　　在制作页面的时候，我们都会遇到各种各样的问题，但是代码规范，遵循大家都使用的准则，兼容的问题就能少一些，这里只列举了一部分，以后有其他的内容我也会继续补充~

posted on 2019-04-04 09:44  Alex_guoyihao  阅读(264)  评论(0)  编辑  收藏  举报

导航