各主流浏览器之间的兼容性-JS篇
来源:互联网 发布:edu域名查询 编辑:程序博客网 时间:2024/06/09 21:22
https://www.cnblogs.com/qq313462961/p/6527184.html
一样米养百样人,尽管吃同样的食物,但还是有人健康,有人身体不适。这个个人估计和浏览器兼容问题一样,同样的HTML(HTML5)+CSS(CSS3)+JS,但是表现出的外部特征还是不能达到统一,存在瑕疵。同样的代码,有的浏览器效果显示“正常”,有的显示“不正常”。
什么是兼容问题,那么:
- 不正常的原因是什么?(不支持标签属性or存在bug)
- 该如何让其显示正常?
为什么浏览器会存在兼容问题?
- 同一浏览器,版本越老,存在bug越多,相对于版本越新的浏览器,对新属性和标签、新特性支持越少。
- 不同浏览器,核心技术不同,标准不同,实现方式也有差异,最终呈现出来在大众面前的效果也是会有差异。
处理兼容问题的思路:
1、要不要做?
- 产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)。
- 成本的角度 (有无必要做某件事)。
2、做到什么程度?
- 让哪些浏览器支持哪些效果。
3、如何做?
- 根据兼容需求选择技术框架/库(如jquery 1.x.x)。
- 根据兼容需求选择兼容工具:html5shiv、Respond.js、CSS Reset、normalize.css、Modernizr.js、 postcss。
- 条件注释、CSS Hack、js 能力检测做一些修补。
渐进增强和优雅降级
- 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
- 优雅降级`(graceful degradation): 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
具体方法:
IE条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码,注意:只有 IE9以下的浏览器才能识别这种语法,其他浏览器仅仅认为是普通注释。
<!--[if IE 6]> <p>IE6下 这句生效,在其他浏览器下认为是普通注释</p><![endif]--><!--[if !IE]><!--> <script>alert("在 IE 下条件语法生效,但script不执行。在非 IE 下上下两句都被当做注释所以当前 script 会执行");</script><!--<![endif]--><!--[if IE 8]> <link href="ie8only.css" rel="stylesheet"><![endif]-->
使用了条件注释的页面在ie9 及以前 中可正常工作,但在ie10 以后不再支持。
CSS hack是利用浏览器遗留 bug 的原理来识别旧的浏览器。
.box{ color: red; _color: blue; /*只有ie6认识*/ *color: pink; /*只有ie67认识*/ color: yellow\9; /*ie浏览器都能识别*/}
以下是一些常见属性的兼容情况
- inline-block: >=ie8
- min-width/min-height: >=ie7
- :before,:after: >=ie8
- div:hover: >=ie7
- inline-block: >=ie8
- background-size: >=ie9
- 圆角: >= ie9
- 阴影: >= ie9
- 动画/渐变: >= ie10
一些兼容写法范例:
.clearfix:after{ content: ''; display: block; clear: both;}.clearfix{ *zoom: 1; /* 仅对ie67有效,zoom:1触发hasLayout,起到类似BFC的效果 */}
.target{ display: inline-block; *display: inline; /*仅对ie67生效*/ *zoom: 1; /*仅对ie67生效*/}
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
<!DOCTYPE html><!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html class="no-js ie8"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><html class="no-js"><!--<![endif]-->
一些和兼容相关的工具/库:
- html5shiv
- Respond.js
- CSS Reset
- normalize.css
- Modernizr.js
- postcss
特别是Modernizr.js 和 postcss 很有实践价值,值得好好看看用法。
用到的网站:
- 浏览器市场份额 - 百度统计流量研究院
- caniuse.com 查CSS属性兼容
- Browserhacks 查 Hack 的写法
上次写的是浏览器兼容性的CSS篇,也还没有写全,不过现在还是先把JS篇也补上再说。
浏览器兼容问题一:获取非行间样式currentStyle/getComputerStyle。
问题:currentStyle,只兼容IE,在其他浏览器是不能用的。
解决方案:同时使用getComputedStyle,可以兼容Chrome、FF。
浏览器兼容问题二:不同浏览器的标签默认的外补丁和内补丁不同
问题:下面是IE7以下不能兼容:
for (var i = 0; i < aImg.length; i++) { aImg[i].src = 'img/' + str[i] + '.png';}
解决方案:换为下面方法:
for (var i = 0; i < aImg.length; i++) { aImg[i].src = 'img/' + str.charAt(i) + '.png';}
浏览器兼容问题一:不同浏览器对DOM的支持程度
IE9对DOM支持兼容好很多,但是还是很多坑。FF对DOM支持在99%以上,就是每次启动太慢。Chrome对DOM支持比FF差,但是比IE好太多。
问题:在IE6-8中,对childNodes支持还是挺好的,相反其他浏览器会把文本节点和元素节点混淆,可用nodeType来鉴别。
HTML:
<ul id="ul1"> <li></li> <li></li> <li></li> <li></li> <li></li></ul>
JS:
var oul = document.getElementById('ul1');alert(oul.childNodes.length);
此时的弹出框就会显示‘11’,比我们想要的‘5’,多出‘6’。
另外上面使用childNodes会出现问题,可用children来代替,只会出现我们想要的元素节点,不会出现兼容问题,所以上面因childNodes可以改为children:
var oul = document.getElementById('ul1');alert(oul.children.length);
此时弹出框显示的数字为‘5’,就是我们想要的结果。
children会只显示子节点。
问题:firstChild只能在IE6-8兼容,在高版本浏览器中只能用firstElementChild。
HTML:
<ul id="ul1"> <li>1</li> <li>2</li> <li>3</li></ul>
JS:
var oUl=document.getElementById('ul1'); //IE6-8oUl.firstChild.style.background='red';
此时只在IE6-8中li背景才会变色,在高级浏览器中没有变化,当换为firstElementChild时:
var oUl=document.getElementById('ul1'); //高级浏览器oUl.firstElementChild.style.background='red';
此时在高级浏览器中li背景会变为红色。
解决方法:
var oUl=document.getElementById('ul1'); if(oUl.firstElementChild){ oUl.firstElementChild.style.background='red';}else{ oUl.firstChild.style.background='red';}
此时无论IE或者chrome、FF都可以得到想要的结果。
PS:相同的兼容问题还存在lastChild、nextSibling、previousSibling中,解决方法也相同。
-
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同
问题:在
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同
- 各主流浏览器之间的兼容性-JS篇
- JS的浏览器兼容性
- 浏览器兼容性-JS篇
- 主流浏览器兼容性调整
- 关于浏览器之间的兼容性
- js浏览器兼容性的写法
- 表单input按钮在各浏览器之间的兼容性
- 特殊符号不同浏览器之间的兼容性处理
- js在不同浏览器的兼容性
- js在不同浏览器的兼容性
- js浏览器兼容性
- js浏览器兼容性记录
- JS浏览器兼容性处理
- 各大浏览器的兼容性
- 主流浏览器CSS兼容性解决方案汇总
- JS判断IE浏览器和各大主流浏览器版本
- android 主流浏览器对 scheme 打开本地 APP 功能的兼容性
- JS中浏览器兼容性知识
- 学习《JS高级程序设计》(2)——原型
- Server-Sent Events和WebSocket服务器向浏览器推送信息
- openstack安装学习(环境)
- 利用tf.truncated_normal与tf.random_normal进行张量初始化的详解
- 对String在多线程中的一些简单认识
- 各主流浏览器之间的兼容性-JS篇
- 对建造者模式的总结
- 解决Xcode 8以后的Alcatraz等插件不可用
- PAT (Advanced Level) Practise1133Splitting A Linked List (25)
- 有序的Map集合--LinkedHashMap
- JavaScript学习笔记_Reduce和Transduce
- 简单存储过程的编写
- java日期格式中MMM的问题
- HttpClient