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

最新推荐文章于 2023-05-05 15:18:46 发布

IronKee

最新推荐文章于 2023-05-05 15:18:46 发布

阅读量430

点赞数 1

分类专栏：前端兼容优化文章标签：前端小程序 css

本文链接：https://blog.csdn.net/IronKee/article/details/83780666

版权

前端兼容优化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

}
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点击事件不起作用 - 简书

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

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


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