ie兼容，手机端兼容问题

兼容性:

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，也能保证在微信中不自动放大，完美解决