原创 前端浏览器兼容难题及解决方法

发布时间:2019-09-24 20:26:37 浏览 2901 来源:博学谷 作者:照照

    前端面试题中,最常见的就是遇到浏览器兼容的问题。比如面试题常常会这样问:工作中你都兼容哪些浏览器 ? 实际开发中你都遇到过哪些兼容问题 ?下面小编就来为大家提供前端浏览器兼容难题的解决方法。

     

    前端浏览器兼容难题

     

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。当然啦关于浏览器兼容的这个问题太笼统了 所以当面试官问这个问题的时候,大家可以问一下面试官是指的是哪方面。

     

    一、CSS里的兼容性问题 :

     

    Input 的按钮在 ios 和 Android 中的样式兼容问题

     

    ios 有默认的渲染 方式 渐变和圆角而且他的行高并不会随着内容的增加。

     

    解决方法:

     

    在标签上增加

     

    -webkie-appearance:none; Height:4rem;

     

    滚动穿透的问题:

     

    滚动穿透是指在移动端当有 flxed 遮罩和弹出层的时候,屏幕上的滑动能够滑动背景下的内容。

     

    最后的解决方法

     

    body.modal-open{

     

    postion:flxed;

     

    width:100%;

     

    二、js里面的兼容性问题

     

    1.const问题

     

    说明:Firefox下,可以使用const关键字或var关键字来定义常量;

     

    IE下,只能使用var关键字来定义常量。

     

    解决方法:统一使用var关键字来定义常量。

     

    2.event.srcElement问题

     

    说明:IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没

     

    有srcElement属性。

     

    解决方法:使用srcObj =event.srcElement ?event.srcElement : event.target;

     

    3.事件绑定

     

    IE:dom.attachEvent();

     

    其他浏览器:dom.addEventListener();

     

    标准浏览器采用事件捕获的方式对应IE的事件冒泡机制(即标准由最外元素至最内元素或者IE由最内元素到最外元素)最后标准方亦觉得IE这方面的比较合理,所以便将事件冒泡纳入了标准,这也是addEventListener第三个参数的由来,而且事件冒泡作为了默认值。

     

    4.ajax略有不同

     

    IE:ActiveXObject

     

    其他:xmlHttpReuest

     

    以上就是前端浏览器兼容难题的解决方法。大家都弄明白了吗?关于前端的更多面试题分享,请继续关注博学谷资讯。

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: 前端HTML面试题汇总附参考答案 下一篇: 前端页面如何优化?解决方案讲解

相关推荐 更多

热门文章

  • 分组和聚合函数的组合怎么使用?代码怎么写?
  • 外键SQL语句的编写怎么用?
  • 数据库设计之三范式是什么?有什么作用?
  • 子查询的SQL语句怎么写?如何使用?
  • 连接查询自连接的SQL语句怎么写?
  • 连接查询右连接的SQL语句怎么写?
  • 连接查询左连接的SQL语句怎么写?
  • 连接查询内连接的SQL语句怎么写?
  • Group by分组查询怎么用?需要掌握哪些内容?
  • 常用的聚合函数有哪些?怎么用?
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码