前端开发，兼容问题（IE、wap、小程序）总结，持续更新

1. 把行级元素设为块级元素就可以指定宽高了
2. span要设置成block/inline-block且有宽度overflow: hidden;text-overflow: ellipsis;white-space: nowrap;才能生效
3. chrome自带属性支持多行文本，最后一行末尾显示…（overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;），其他浏览器靠css只能实现单行末尾展示…，多行的话需要用js判断长度，折断，再拼接
4. 在ie6/7中，如果本身是块级元素，再设置display:inline-block会无效，解决方案为再加上*zoom:1,*display:inline
5. 设置z-index需要配合position才会生效
6. span本身margin-left是有效的，margin-top无效，设置display:block/inline-block就可以了
7. placeholder在chrome里focus后不会消失，体验很不友好，解决办法需要用到js，在ie10里focus会消失（ie10开始支持placeholder属性）
8. ie8不支持indexOf
9. $(class).css('top')，获取元素的top值，IE8及以下与主流浏览器不一样
10. vertical-align: middle，设置左边icon与右边文字垂直居中，需要图片和文字均设置该属性display: inline-block; vertical-align: middle; width: 200px;
11. IE10以下不支持this.files[0]获取上传文件信息
12. IE8及以下不支持trim();
13. IE中不要用宋体
14. IE8不支持background-size，img设置宽高没用（在行内设置也没用），依然会展示原图。只能通过父级div设置宽高，img设置宽度100%来限制图片大小
15. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    以上代码告诉IE浏览器，IE8/9以及以后的版本都会以最高版本IE来渲染界面，据官网定义X-UA-compatible标头不区分大小写，但是，它必须写在网页中除了title元素和其他meta以外的所有其他元素之前，如果不是，这句话将不起作用
16. background-color: rgba(0,0,0,0.5);IE8及以下使用filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);
17. object.setAttribute("style","position:absolute;left:10px;top:10px;")在IE8、Chrome、火狐、Opera10中都能设置成功；但是在IE7下无法设置。使用 object.style.cssText="position:absolute;"或者单独 object.style.各个属性 ，逐一进行设置。
18. 在火狐Firefox、opera、IE下阻止冒泡事件是不同的代码的，火狐下使用的是event.stopPropagation()，而IE下使用的是cancelBubble，jQuery 可以使用e.stopPropagation()就可以兼容了，如果是纯粹的JavaScript需要下面的代码来统一

    if (event.stopPropagation) {

       // 针对 Mozilla 和 Opera

       event.stopPropagation();

    } else if (window.event) {

        // 针对 IE

        window.event.cancelBubble = true;

    }

19. ios点击事件失效，div span p等标签不带点击事件，所以click事件无法触发，如果是a标签的话需要加上href=”javascript:void(0);”才能生效，否则也是失效，解决方法：（1）给div等不可点击元素加上cursor：point（2）不用$(document).on(“click”, “元素”，function(){})，改用$(“元素”).on(“click”,function(){})（3）jquery改用tap事件，不用click事件参考https://segmentfault.com/q/1010000003038174 ios中click点击事件不起作用 - 简书

20. 兼容ios时间格式，把2020-10-10改成2020/10/10,中划线在苹果上获取时间getTime()戳有兼容性问题，在真机会输出NaN
    let _startTime = startTime.replace(/-/g,'/').getTime();
    

21.  小程序最后一个元素的margin-bottom是无效的，解决方案：在底部追加一个空的dom（还有其他方案，比如使用padding，）

    <!-- 底部占位，解决小程序 ios 页面最后一个元素的margin-bottom无效 -->

    <view class="bottom-temp"></view>

22. 页面如果有元素宽度大于一屏，会导致页面可以左右滑动，两边会有隐藏区域，（有时被overflow-x:auto看不出，需要仔细定位