浏览器兼容是从三大方面来说的，分别为html，css，javaScript这三大方面来说的。如下图:
移动端
1. IOS移动端click事件300ms的延迟响应
移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,
2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。
双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。
原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接a标签 ，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。
解决方案：
fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序为 touchstart --> touchmove --> touchend -->
click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题
2.一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发
css增加cursor:pointer就搞定了。
3. 三星手机遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)
问题发现于三星手机，这个在特定需求下才会有，因此如果没有类似问题的可以不看。首先需求是浮层操作，在三星上被遮罩的元素依然可以获取focus、click、change)，有两种解决方案。
1.是通过层显示以后加入对应的class名控制，截断显示层下方可获取焦点元素的事件获取
2.是通过将可获取焦点元素加入的disabled属性，也可以利用属性加dom锁定的方式（disabled的一种变换方式）
4. h5底部输入框被键盘遮挡问题
h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决:
var oHeight = $(document).height(); //浏览器当前的高度 $(window).resize(function(){ if($(document).height() < oHeight){ $("#footer").css("position","static"); }else{ $("#footer").css("position","absolute"); } }); 5.不让 Android 手机识别邮箱
<meta content="email=no" name="format-detection" /> 6.禁止 iOS 识别长串数字为电话
<meta content="telephone=no" name="format-detection" /> 7.禁止 iOS 弹出各种操作窗口
webkit-touch-callout:none 8.消除 transition 闪屏
webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/ 9.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格
可以通过正则去掉 this.value = this.value.replace(/\u2006/g, ''); 10.禁止ios和android用户选中文字
webkit-user-select:none 11.在ios和andriod中,audio元素和video元素在无法自动播放 应对方案：触屏即播
$('html').one('touchstart',function(){ audio.play() }) 12.ios下取消input在输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" /> 13.android下取消输入语音按钮
<input::-webkit-input-speech-button {display: none}> 14 CSS动画页面闪白,动画卡顿
解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位 2.开启硬件加速 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 15.fixed定位缺陷
ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
解决方案： 可用iScroll插件解决这个问题
16.阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;} 17. Input 的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal
18. 往返缓存问题
点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系。
解决方法 ：window.onunload = function(){};
19. calc的兼容性处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：
div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); } 20. iOS6下伪类:hover
除了a标签之外的元素无效；在Android下则有效。类似:
div#topFloatBar_l:hover #topFloatBar_menu { display:block; }
这样的导航显示在iOS6点击没有点击效果，只能通过增加点击侦听器给元素增减class来控制子元素。
21. 在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：
- {-webkit-tap-highlight-color:rgba(0,0,0,0);}
不过这个方法在现在的安卓浏览器下，只能去掉那个橙色的背景色，点击产生的高亮边框还是没有去掉，有待解决！
一个CSS3的属性，加上后，所关联的元素的事件监听都会失效，等于让元素变得“看得见，点不着”。IE到11才开始支持，其他浏览器的当前版本基本都支持。
pointer-events: none;
22. Zepto点透的解决方案
zepto的tap是通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,在点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发，而在冒泡到document之前，用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计)，所以在执行完tap事件之后，弹出来的选择组件马上就隐藏了，此时click事件还在延迟的300ms之中，当300ms到来的时候，click到的其实不是完成而是隐藏之后的下方的元素，如果正下方的元素绑定的有click事件此时便会触发，如果没有绑定click事件的话就当没click，但是正下方的是input输入框(或者select选择框或者单选复选框)，点击默认聚焦而弹出输入键盘，也就出现了上面的点透现象。
引入fastclick.js，在页面中加入如下js代码 1 window.addEventListener( "load", function() { 2 FastClick.attach( document.body ); 3 }, false ); 或者有zepto或者jQuery的js里面加上 1 $(function() { 2 FastClick.attach(document.body); 3 }); 当然require的话就这样： 1 var FastClick = require('fastclick'); 2 FastClick.attach(document.body, options); 方案二：用touchend代替tap事件并阻止掉touchend的默认行为preventDefault() 1 $("#cbFinish").on("touchend", function (event) { 2 //很多处理比如隐藏什么的 3 event.preventDefault(); 4 }); 方案三：延迟一定的时间(300ms+)来处理事件 1 $("#cbFinish").on("tap", function (event) { 2 setTimeout(function(){ 3 //很多处理比如隐藏什么的 4 },320); 5 }); PC端
1.如果图片加a标签在IE9-中会有边框
解决方案:img{border:none;} 2.rgba不支持IE8
解决方案:可以用 opacity eg:opacity:0.7;/*FF chrome safari opera*/ filter:alpha(opacity:70);/*用了ie滤镜,可以兼容ie*/ 但是,需要注意的是,opacity会影响里面元素的透明度 3. display:inline-block ie6/7不支持
解决方案: 1.display:inline-block; 2.*display:inline; 4.默认的body没有body去掉margin情况下ie5、6、7边缘会很宽margin-top加倍 如果处于无声明状态那么所有的ie浏览器margin-top加倍
解决方案:用css给body添加magin属性为0px body{margin:0;} 5.IE 6.0 Firefox Opera等是 真实宽度=width+padding+border IE5.X 真实宽度=width
解决方案:
方法1:
div.content { width:400px; //这个是错误的width(对于ie5来说是正确的），所有浏览器都读到了 voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容 voice-family:inherit; width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的 } 方法2:
div.content { width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值 width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用 } 6.height不能小于16px,设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
解决方案:overflow设置为hidden 7.min-height不兼容 ie6 7解释为超过高度就撑开，而其他版本浏览器则遮盖下面的层
解决方案:min-height:200px; height:auto !important; height:200px; overflow:visible; 8.浮动的div有margin_left属性ie6会加倍 无论兼容视图还是无声明视图
解决方案; IE6唯一识别属性_的方式加_display属性_display:inline; 9.cursor兼容 自定义指针cur格式的图片url路径问题无论是兼容还是无声明版本
解决方案:cursor:url(Hand.cur), url(/Hand.cur), auto; 10.img浮动 img标签打回车会造成每个图片之间有缝隙
解决方案:可以删除之间的回车键也可以让这些图片浮动 11.在IE浏览器下 input type=“text"文本框点击时后面会出现"X”,以及type="password"后面会出现眼睛,如何除去这两种默认样式:
::-ms-clear,::-ms-reveal{display:none;} 注:IE9-不识别 12.CSS3前缀
-webkit- webkit渲染引擎 chrome/safari -moz- gecko渲染引擎 firefox -ms- trident渲染引擎 IE -o- opeck渲染引擎 opera 动画、过渡、background-size 都需要加前缀 eg: 动画 @-webkit-keyframes name{ 0%{动画开始的css样式;} 100%{动画结束的css样式;} } -webkit-animation:name 8s infinite linear; 过渡: div.box{ bottom:-40px;<br> -webkit-transition:all .3s ease-in-out 0s; } 注:但是过渡不兼容IE8-,可以用JS动画实现 background-size 同样也不支持IE8,可以考虑用img 13.渐变
解决方案: filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#35FEA1,endColorStr=#6E9DFF); /*IE 6 7 8*/ background: -ms-linear-gradient(top, #35FEA1, #6E9DFF);/* IE 10 */ background:-moz-linear-gradient(top, #35FEA1, #6E9DFF); /*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/*谷歌*/ background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/* Safari 4-5, Chrome 1-9*/ background: -webkit-linear-gradient(top, #35FEA1, #6E9DFF);/*Safari5.1 Chrome 10+*/ background: -o-linear-gradient(top, #35FEA1, #6E9DFF);/*Opera 11.10+*/ 14.PIE.htc 可以实现很多css3属性在IE下的兼容性 如:圆角、阴影、渐变
(1) 圆角 border-radius
.signBtn{ height: 40px; background-color:#08BCD2; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; behavior: url(css/PIE.htc); } (2)阴影 box-shadow
.box{ width:200px; height:200px; -webkit-box-shadow:1px 0 10px; -moz-box-shadow:1px 0 10px; box-shadow: 1px 0 10px; background-color: #fff; behavior: url(css/PIE.htc);/*IE边框阴影*/ } (3)背景透明rgba
.box{ background-color:rgba(12, 154, 171, 0.29); behavior: url(css/PIE.htc); -pie-background:rgba(12, 154, 171, 0.29); } (4)渐变
.box{ width:200px; height:400px; background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393)); background:-moz-linear-gradient(#9F9, #393); -pie-background:linear-gradient(#9F9, #393); behavior:url(pie.htc); } 注:PIE.htc文件路径相对是相对于css文件,并非html文件,以上例子是将PIE.htc文件放在与css样式文件同一个文件夹css内,而对应的html问价与css文件夹同级
15.JS实现点击跳转到指定位置
$(".arraw-bt").click(function(){ var scroll_offset = $("#section").offset(); console.log(scroll_offset); $("body,html").animate({//如果只写body,只被chrome支持 只被chrome支持 Firefox和ie不支持 "scrollTop":scroll_offset.top },0);//此处0写上会一下跳转到指定位置,若不写会有过渡效果 /}); 16、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案： css 里增加通配符 * { margin: 0; padding: 0; } 17、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案：设置display:inline; 18、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度 19、图片默认有间距
解决方案：使用float 为img 布局 20、IE9一下浏览器不能使用opacity
解决方案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); 21、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden； 22、cursor:hand 显示手型在safari 上不支持
解决方案：统一使用 cursor:pointer 23、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative 等等还有许多的兼容性问题，在这就不和大家罗列了，这些是比较常见的。
来源：CSDN
作者：@.xiaohuilang
链接：https://blog.csdn.net/qq_44777244/article/details/90487015