兼容性:
1.ie6，7不能兼容border-radius；
若需要可以用图片的方式进行模拟。
2.ie6, 7中如果兄弟元素没有给左浮动，而本身给了右浮动，将会出现塌陷（也就是掉下去）；
如需要可以将右浮动的元素写在左边元素的前面。如：<span style="float:right"></span><p></p>
3.ie6, 7不兼容ES6的写法，所以写js的时候要注意。
4.ie6,7对CSS3的一些属性不能识别。
比如animation；建议自己用jquery的animate（）方法实现。
5.ie6,7不识别伪类。
6.图片会自带3px；
解决方法：display：block；
7.a标签包含img，会出现蓝色边框；
解决方法：border：0；
8.ie8及以下，有时候会遇到一个问题，当你用一个图片覆盖了整个页面，且你给了z-index属性，在下面的盒子中，空白处都会默认为这个图片。（png格式图片）
解决方法：要给此盒子加background去覆盖这个层级关系，才可以选中此盒子对应的空白处。
9.ie6兼容min-height
解决方法：min-height：value；height：auto！important；height：value；（注意顺序不能换）。
10.表单元素距离顶部不一致
运用float来解决。
11.margin外边距重叠，相互并列的两个元素，一个给了margin-top，一个给了margin-bottom，浏览器按照两者之间较大的值进行解析
解决方法：给其中一个元素加overflow：hidden。
12.padding-bottom给像素值时，在谷歌和ie浏览器中值有偏差。
解决方法：换成给元素高，不给padding-bottom。
13.解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容
解决方法：哪个需要设置overflow；hidden，生效，就在哪个上面设置position:relative;
14.有时候页面屏幕变小，内容背景显示不完全。
解决方法：给个最小宽度。
15.ie8以下调用json文件，json数据的对象必须完整。
16.ie6下多个li包a，li给了浮动，当a为块元素时，li不在一排，掉了下来。
解决方法：给a加display：inline-block；
17.ie6支持hover
18.IE6下png背景不透明问题的综合拓展：
https://www.zhangxinxu.com/wordpress/2009/08/ie6%E4%B8%8Bpng%E8%83%8C%E6%99%AF%E4%B8%8D%E9%80%8F%E6%98%8E%E9%97%AE%E9%A2%98%E7%9A%84%E7%BB%BC%E5%90%88%E6%8B%93%E5%B1%95/
19.ie6不支持png24格式保存下的透明背景，支持png8：因为png24格式下的透明是Alpha透明。
H5移动端ios/Android兼容性：
1.写背景图background时最好加上top left 或者0 0 不然写运动效果时容易出现跳
2.禁止复制、选中文本
.el {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
3.苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;
4.给不同屏幕大小的手机设置特殊样式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
5.ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：
input,textarea {
border: 0;
-webkit-appearance: none;
}
6.消除 IE10 里面的那个叉号:input:-ms-clear{display:none;}
7.input 的placeholder属性会使文本位置偏上
line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法
8.input type=number之后，pc端出现上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
9.实现android和ios系统手机打开相机并可选择相册功能
<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
$(function () {
//获取浏览器的userAgent,并转化为小写
var ua = navigator.userAgent.toLowerCase();
//判断是否是苹果手机，是则是true
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if (isIos) {
$("input:file").removeAttr("capture");
};
})
10.移动端 HTML5 audio autoplay 失效问题
这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，
所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。
11.iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，
因此最佳方案是将 text-size-adjust 为 100% 。
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
12.移动端尽量用touch的相关事件去代替click等其他鼠标事件。
13.微信端调用type=file，选择文件，accept要这样写“image/*”；否则有些手机可能会出现选了图片没反应。
14.解决第三方网页在微信浏览器中点击图片自动放大：
传统方式：
$(document).on(‘click’, ‘img’, e => {
e.preventDefault();
})
这个方式可能会把所有的默认的属性都屏蔽了，典型的就是a标签不能跳转
css方式：
img{
pointer-events: none;
}
这个会让img标签的点击事件失效，如果想要点击图片就要给上面再写一层
Vue方式：
v-on:click.prevent或者@click.prevent
既能保证img标签的click，也能保证在微信中不自动放大，完美解决