持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情
浏览器兼容性问题涉及的面比较广，从HTML标签、CSS样式到JS都存在兼容性问题。兼容性问题给Web开发造成了额外的成本支出，在兼容性上要求越高，付出的代价越大。
浏览器的兼容性主要通过测试解决，桌面网页最为困难的是兼容IE6/7/8/等老浏览器（可以使用IE Tester或IE11的开发者工具测试）！解决浏览器兼容性没有什么难度，繁锁而已，如果要兼容老浏览器，则应放弃使用新功能或者对老浏览器显示友好的提示信息（使开发测试时间增长、成本增加）。
手机浏览器中最为困难的是Android版的UC浏览器，Android版的UC几乎不支持H5和CSS3，甚至是常用的CSS样式有些都不支持，如果项目要兼容UC手机浏览器，那写CSS时，就只能使用最基本的样式！也不要指望页面能做多漂亮多复杂了。
Android系统上除了UC这个奇葩之外，本身的碎片化、更新慢也是大问题。如很多手机现在的Android系统还是4.4，甚至更古老（尽管Adnroid7都发布了）。如果开发应用内嵌页面，可以建议Android工程师采用腾讯出的WebView控件，能够使页面对H5的支持和微信及手机QQ一样好，从而达到和iOS同级别的效果。
直接使用框架可以有效地避免兼容性问题，如各种UI框架和jQuery框架都会考虑兼容性。另外使用重置样式表也可以抹平各浏览器的差异。
在开发Web App时需要注意，移动设备，无论是iOS还是Android都使用Webkit内核，尤其是iOS，需要使用以下样式：
-webkit-appearance: none; 禁用浏览器特定外观（如按扭等表单元素）
-webkit-tap-highlight-color: rgba(0，0，0，0); 将触摸时的高亮颜色设为完全透明
-webkit-touch-callout: none; 禁用页面上的上下文菜单（上面有复制、粘贴等功能）
-webkit-text-size-adjust: none; 禁用页面自动调整文字大小
-webkit-user-select: none; 禁止用户选择页面上的文字
回弹滚动
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
另：有一些样式还需要使用-webkit前缀，如：
CSS滤镜要写成-webkit-filter
或者要兼容特别老的iOS或Android系统时CSS3样式要加-webkit前缀
另：如果需要对某些标签进行深度控制，则需要使用-webkit伪类，如：
input[type=range]::-webkit-slider-runnable-track{ }
input[type=range]::-webkit-slider-thumb{ }
可以控制滑动条的样式
progress::-webkit-progress-bar { }
progress::-webkit-progress-value { }
可以控制进度条的样式
另：使用meta标签可以要求浏览器支持或关闭某些行为
<meta name="format-detection" content="telephone=no" /> 禁用手机号探测
<meta name="format-detection" content="email=no"> 禁用email探测
固定到手机桌面（桌面书签）
<meta name="apple-mobile-web-app-title" content="常伟">
<link rel="apple-touch-icon" sizes="57x57" href="icon57.png" />
<link rel="apple-touch-startup-image" href="launch6.png">
<meta name="mobile-web-app-title" content="常伟">
<meta name="mobile-web-app-capable" content="yes">
关闭iOS键盘首字母自动大写，自动修正
<input type="text" autocapitalize="off" />
<input type="text" autocorrect="off" />
