常见的兼容性问题

概述常见的兼容性问题 浏览器有着大量不同的版本，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页面渲染效果不统一的问题。 初始化样式 因浏览器兼容的问题，不同的浏览器对 常见的兼容性问题

浏览器有着大量不同的版本，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页面渲染效果不统一的问题。

初始化样式

因浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，如果不初始化会造成不同浏览器之间的显示差异，布局出现错乱，所以要初始化样式，达到统一的布局。
最粗暴的方案就是使用*初始化样式，但是其会对于所有的标签加载样式以及计算样式优先级，可能会对性能有所影响。

* {     margin: 0;    padding: 0;}

通常使用normalize.CSS抹平默认样式差异，当然也可以根据样式定制自己的reset.CSS。

<link href="https://cdn.bootCSS.com/normalize/7.0.0/normalize.min.CSS" rel="stylesheet">

内核样式兼容

在CSS3标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的CSS3新属性，目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。

内核	代表浏览器	前缀
TrIDent	IE浏览器	-ms
Gecko	firefox	-moz
Presto	Opera	-o
Webkit	Chrome、Safari	-webkit

透明属性

用来设定元素透明度的opacity是CSS 3里的一个属性，现代浏览器都已经支持，对于老版本浏览器可以通过加入私有前缀来支持，对于ie6-ie8可以通过filter属性来支持，IE4-IE9都可以通过滤镜写法提供兼容支持。

opacity: 0.5;-moz-opacity:0.5;filter: Alpha(opacity = 50); //ie6-ie8filter: progID:DXImagetransform.Microsoft.Alpha(style = 0,opacity = 50); //IE4-IE9

媒体查询

对于IE9以下浏览器不支持CSS3媒体查询的问题，通常使用respond.Js来作为兼容性解决方案。

<script type="text/JavaScript" src="https://cdn.bootCSS.com/respond.Js/1.4.2/respond.min.Js"></script>

HTML5标签

对于IE9以下浏览器不支持HTML5新标签的问题，可以使用document.createElement创建元素并设置其CSS样式即可，通常使用HTML5shiv.Js来作为兼容性解决方案。

<script>    document.createElement('header');</script><style>    header{display: block;}</style>

<script type="text/JavaScript" src="https://cdn.bootCSS.com/HTML5shiv/3.7.3/HTML5shiv.min.Js"></script>

placeholder兼容性

placeholder是HTML5新增的一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点或输入内容时，提示文字消失。对于其兼容性首先需要判断input是否支持placeholder，然后在不支持的情况下可以通过input的onfocus与onblur事件监听来实现placeholder效果。

<!-- 简单示例 --><input type="text" value="Tips" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Tips';}">

事件监听句柄

在IE9之前，必须使用attachEvent而不是使用标准方法addEventListener来注册元素的监听器，事件兼容的问题，通常需要会封装一个适配器的方法，过滤事件句柄绑定、移除。

 var handler = {} //绑定事件 handler.on = function(target,type,handler) { 	if(target.addEventListener) { 		target.addEventListener(type,handler,false); 	} else { 		target.attachEvent("on" + type,function(event) { 				return handler.call(target,event); 		    },false); 	} }; //取消事件监听 handler.remove = function(target,handler) { 	if(target.removeEventListener) { 		target.removeEventListener(type,handler); 	} else { 		target.detachEvent("on" + type,function(event) { 			return handler.call(target,event); 		},true);     } };

阻止默认行为

W3C推荐的阻止默认行为的方式是event.preventDefault()，此方法只会阻止默认行为而不会阻止事件的传播。IE9之前的浏览器阻止默认行为需要使用window.event.returnValue = false。直接在事件处理函数中return false也能阻止默认行为，只在DOM0级模型中有效。此外，在jquery中使用return false会同时阻止默认行为与事件传播，通常也会封装一个方法来实现默认行为的阻止。

handler.preventDefault = function(event) {    event = event || window.event;    if (event.preventDefault) {        event.preventDefault();    } else {        event.returnValue = false;    }}

阻止事件冒泡

W3C推荐的阻止冒泡的方法是event.stopPropagation()，IE9之前则是使用window.event.cancelBubble = true;，通常也会封装一个方法来实现阻止事件冒泡。

handler.stopPropagation = function(event) {    event = event || window.event;    if (event.stopPropagation) {        event.stopPropagation();    } else {        event.cancelBubble = false;    }}

滚动高度

获取窗口的滚动高度scrolltop需要采用兼容性写法，即使声明<DOCTYPE>浏览器对于文档的处理也会有所不同。

var scrolltop = document.documentElement.scrolltop || document.body.scrolltop;

日期时间

使用new Date()构造函数生成日期时间对象，对于new Date("2020-06-29")语法在一些早期的浏览器会输出invalID date，这主要是因为早期浏览器不支持表达日期的-，而/才是被广泛支持的，所以在处理早期浏览器的兼容性时需要将-替换为/。

new Date("2020-06-29".replace(/-/g,"/"));

IE条件注释

IE专门提供的一种语法，只有IE能识别运行，其他浏览器只会作为注解。

<!--[if lt IE 9]>    <script type="text/JavaScript" src="https://cdn.bootCSS.com/respond.Js/1.4.2/respond.min.Js"></script>    <script type="text/JavaScript" src="https://cdn.bootCSS.com/HTML5shiv/3.7.3/HTML5shiv.min.Js"></script><![endif]-->

<!--[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]-->

<!--     ! NOT运算符    lt 小于运算符    lte 小于或等于运算符    gt 大于运算符    gte 大于或等于运算符    & AND运算符    | OR运算符    () 子表达式运算符 用于与布尔运算符创建更复杂的表达式-->

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jianshu.com/p/c0b758a88c7chttps://juejin.im/post/5b3da006e51d4518f140edb2https://juejin.im/post/59a3f2fe6fb9a0249471cbb4

总结

以上是内存溢出为你收集整理的常见的兼容性问题全部内容，希望文章能够帮你解决常见的兼容性问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。