无论是作为一个刚刚步入前端的菜鸟还是已经摸爬滚打好多年的老司机，兼容问题一直笼罩着前端工作者们，今天，网上看了不少总结，我在这里综合一下。我是做web前端的，经常做移动端，pc端往往是和IE打交道。想想IE真是让人头疼。以下是一些移动端及pc端踩过的坑，仅供参考。哈哈
1：苹果浏览器伪标签<a>不支持css动画
2：移动端浏览器给根元素添加overfow：hidden，大部分浏览器没效果
3：Ios中h5不支持自动播放
解决办法：给页面根元素绑定一次touchstart事件播放流媒体文件，模拟自动播放
4：Ios给移动端按钮添加js事件，按钮必须是原生html按钮或<a>标签自定义构成
5：input框聚焦，ios出现outline或者阴影，安卓显示正常
解决办法：input:focus{outline:none} input:{-webkit-appearance: none;}
6：ios系统会将数字当成电话号码，导致变色
解决办法：<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
放到<head>中
7:input的placeholder属性会使文本位置偏上
解决办法：line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法
8：点击300ms 使用fastclick
9： 移动端1px 在ios中使用0.5px
10： js中获取浏览器高度，获取scrollTOP等属性需要兼容
11： h5页面 当输入框在最底部，点击软键盘后输入框会被遮挡。定时器或者修改为固定定位
12：ios 设置input 按钮样式会被默认样式覆盖
解决办法：input,textarea{border:0;-webkit-appearance: none;}
13：消除 IE10 里面的那个叉号:input:-ms-clear{display:none;}
14：手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象
15：input 的placeholder属性会使文本位置偏上
解决办法：line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法
16：input type=number之后，pc端出现上下箭头
解决办法：input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none!important;
margin:0;
}
17：禁止复制、选中文本
解决办法：.el{
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
18：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0" user-scalable=no"></meta>
19:在input框获得焦点时文字被清空用value 在input框输入文字时被清空用placeholder
20:苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;
-----------------------------------------------------------------------------------------------------------------------------------
对于浏览器的兼容问题，下面说一下各位大佬，只针对IE8+版本和其他现代浏览器
1：据统计，chrome已经取代ie占据半壁江山，ie8、ie9占有接近25%的份额，紧跟着是firefox
2：浏览器内核
Chromium内核，以Chrome为代表
Gecko内核，以Firefox为代表
Webkit内核，以Sarfari为代表
Trident内核，以IE为代表
Presto内核，以老版本的Opera为代表
上面的兼容，都是在开发中遇到的，据个人经验，这些方法都是可行的，如有解决不了的情况，请根据自己的情况对号入座哇！
兼容性可能不太全，以后如果有遇到其他的情况，我会在此篇的文章后补全的；
网友评论