浏览器中常见的CSS兼容性问题
浏览器常见的CSS兼容性问题包括：盒模型、浮动、定位、宽高属性、透明度、边框和背景等。这些问题主要是由于不同浏览器对CSS解析的实现方式不同所导致的。为了解决这些问题，我们可以使用一些技巧，如使用CSS Hacks、使用Reset CSS文件、使用Modernizr库等。此外，我们还可以使用一些工具来帮助我们检测和修复CSS兼容性问题，如Can I use网站、BrowserStack网站等。总之，虽然浏览器兼容性问题可能会给我们带来一些麻烦，但只要我们掌握了一些技巧和方法，就可以有效地解决这些问题。
浏览器有着大量不同的版本，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页面渲染效果不统一的问题。
初始化样式
因浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，如果不初始化会造成不同浏览器之间的显示差异，布局出现错乱，所以要初始化样式，达到统一的布局。
最粗暴的方案就是使用*初始化样式，但是其会对于所有的标签加载样式以及计算样式优先级，可能会对性能有所影响。
*{margin:0;padding:0;}通常使用Normalize.css抹平默认样式差异，当然也可以根据样式定制自己的reset.css。
<linkhref="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css"rel="stylesheet">
内核样式兼容
在CSS3标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的CSS3新属性，目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。
透明属性
用来设定元素透明度的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来作为兼容性解决方案。
<scripttype="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><scripttype="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效果。
<!--简单示例--><inputtype="text"value="Tips"onFocus="this.value='';"onBlur="if(this.value==''){this.value='Tips';}">事件监听句柄
在IE9之前，必须使用attachEvent而不是使用标准方法addEventListener来注册元素的监听器，事件兼容的问题，通常需要会封装一个适配器的方法，过滤事件句柄绑定、移除。
varhandler={}//绑定事件handler.on=function(target,type,handler){if(target.addEventListener){target.addEventListener(type,handler,false);}else{target.attachEvent("on"+type,function(event){returnhandler.call(target,event);},false);}};//取消事件监听handler.remove=function(target,type,handler){if(target.removeEventListener){target.removeEventListener(type,handler);}else{target.detachEvent("on"+type,function(event){returnhandler.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>浏览器对于文档的处理也会有所不同。
varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;
日期时间
使用new Date()构造函数生成日期时间对象，对于new Date("2020-06-29")语法在一些早期的浏览器会输出invalid date，这主要是因为早期浏览器不支持表达日期的-，而/才是被广泛支持的，所以在处理早期浏览器的兼容性时需要将-替换为/。
newDate("2020-06-29".replace(/-/g,"/"));IE条件注释
IE专门提供的一种语法，只有IE能识别运行，其他浏览器只会作为注解。
<!--[ifltIE9]><scripttype="text/javascript"src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><scripttype="text/javascript"src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--><!--[if!IE]>除IE外都可识别<![endif]--><!--[ifIE]>所有的IE可识别<![endif]--><!--[ifIE6]>仅IE6可识别<![endif]--><!--[ifltIE6]>IE6以及IE6以下版本可识别<![endif]--><!--[ifgteIE6]>IE6以及IE6以上版本可识别<![endif]--><!--[ifIE7]>仅IE7可识别<![endif]--><!--[ifltIE7]>IE7以及IE7以下版本可识别<![endif]--><!--[ifgteIE7]>IE7以及IE7以上版本可识别<![endif]--><!--[ifIE8]>仅IE8可识别<![endif]--><!--[ifIE9]>仅IE9可识别<![endif]--><!--!NOT运算符lt小于运算符lte小于或等于运算符gt大于运算符gte大于或等于运算符&AND运算符|OR运算符()子表达式运算符用于与布尔运算符创建更复杂的表达式-->
