关于浏览器兼容性问题，我们开发中某些情况下肯定会遇到，今天就从手机、电脑、js、html、css这几个方面谈谈。
1、手机浏览器的兼容。
手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象
.box{
display: -webkit-box;/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box;/* 老版本语法: Firefox (buggy) */
display: -ms-flexbox;/* 混合版本语法: IE 10 */
display: -webkit-flex;/* 新版本语法: Chrome 21+ */
display: flex;/* 新版本语法: Opera 12.1, Firefox 22+ */
}
.box>li{
-webkit-box-flex: 1.0;
box-flex: 1.0;
-webkit-flex: 1.0;
flex: 1;
width: 0;/*解决兼容性问题*/
}
输入框的兼容性解决
input[type="text"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="password"]{
-webkit-appearance: none;
display: block;
width: 100%;
height: 0.8rem;
line-height:normal;/*手机上的line-height不能写成和height的值一样，会出现再次输入光标靠上的现象*/
background: none;
font-size: 0.32rem;
padding-left: 0.28rem;
border-radius: 0;
-webkit-border-radius: 0;
border: 1px solid #d5d5d5;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);/*解决加入js后input框输入瞬间变白的现象*/
}
禁用 radio 和 checkbox 默认样式
input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{
display: none;/*这样就可以用class自定义样式*/
}
webkit表单输入框placeholder的颜色值
input::-webkit-input-placeholder{color:#999;}
input:focus::-webkit-input-placeholder{color:#999;}
手机上的多行省略
.overflow-hidden{
display: box !important;
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;/*第几行出现省略号*/
/*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/
}
文本标签line-height：1或者是line-height等于height文字会被切掉
手机上浮动元素能写宽尽量写宽不然很容易出现兼容性问题,尽量不要写高，因为内容多少不固定
给不同屏幕大小的手机设置特殊样式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
元素一定要写上type属性不然会默认提交表单，出现想不到的bug
某些安卓手机的自带浏览器不识别onkeydown onkeypress onkeyup事件，这些事件会导致不能输入汉字
input框若是不想输入文字 只能读不能写可以加readonly属性
手机上用背景图写运动，如果需要背景图定位来实现运动效果可以用rem进行计算后加上basckground-size:图的个数*100% 0；
2、html的兼容
1.H5新标签在IE9以下的浏览器识别
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
html5shiv.js下载地址
https://github.com/aFarkas/html5shiv/releases
2.ul标签内外边距问题ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。解决方法：统一设置ul的内外边距为0
3、CSS样式的兼容性
1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同
IE的条件注释hack：
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍
解决办法：display:block;
3.IE6下图片的下方有空隙
解决方法：给img设置display:block;
4.IE6下两个float之间会有个3px的bug
解决办法：给右边的元素也设置float:left;
5.IE6下没有min-width的概念，其默认的width就是min-width
6.IE6下在使用margin:0 auto;无法使其居中
解决办法：为其父容器设置text-align:center;
7.被点击过后的超链接不再具有hover和active属性
解决办法:按lvha的顺序书写css样式，
“:link”: a标签还未被访问的状态；
“:visited”: a标签已被访问过的状态；
“:hover”: 鼠标悬停在a标签上的状态；
“:active”: a标签被鼠标按着时的状态；
8.在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序
9.IE6下无法设置1px的行高，原因是由其默认行高引起的
解决办法：为期设置overflow:hidden;或者line-height:1px;
4、JavaScript的兼容性
1.标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；
2.事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准
3.window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement
4.在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。
比如：var year= new Date().getYear();
5.ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject
6.IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同
其他浏览器：parentNode parentNode.childNodes
IE：parentElement parentElement.children