浏览器兼容问题(主要时IE上遇到的坑坑坑) caniuse 工具(基本参考作用,实际还是需要测试)

(1)安装babel-polyfill基本操作了,IE浏览器没有内置Promise对象,不仅如此,几乎所有的ES6新增方法IE都不能用,所以需要babel Polyfill

(2)Flex 不兼容IE9包括IE以下,所以如果水平居中会要在对应的元素添加

[问题情景] 项目用的iview的modal的源码的样式就是用flex的,所以对应加上就能够兼容到IE9,使弹窗能够水平垂直居中

(3)日期的格式new Date(YYYY/MM/DD)

如果你使用的时new Date(‘YYYY-MM-DD’)格式,IE会显示报错,所以需要改成new Date(`YYYY/MM/DD`)

(4)IE9貌似对transform不兼容(虽然caniuse里面是表示可以兼容到IE9的,或许是部分兼容?不太了解)

[情景]需要实现一个左侧菜单栏,点击切换按钮,那么左侧菜单栏滑动出现另一个详细菜单栏(通常都是显示和隐藏的,不过这次需求需要切换菜单)

[实现方式]开始的时候只写了下面的第一句,可是到了IE9就没有反应,不过之后讲IE的那个-ms-transform加上之后可以切换了,可是在chrome,IE11,IE10上面过度的效果就没有了,但是也算解决了在IE9的情况下没有任何效果的问题

(5) iview的tab组件很卡彭如果要兼容IE9的话,因为用了flex,translate3d还有visibility,查了一下,这三个都不兼容IE9的(整个组件可以说对于IE9很不友好)

啊啊啊啊啊啊!想到一个解决的方法,tab有一个属性是animated的,用一个方法来判断是否为IE9,如果是的话animated就设置为false,如果不是的话,animated就设置为true,这样子内容切换的部分就不会出现问题[PS:文档很重要,我还想了一会儿]

(6) IE9,IE10下,在modal里面的datepicker,点击datepipcker会出现modal遮挡的问题,那个z-index设置就好了

(7)IE10/9 下,如果是背景图片的话,要设置display才会显示,我是设置inline-block的(具体原因我也不太清楚,日后有时间再了解)

(8)iview的select组件再IE10点击选中不了,渲染不到页面,在IE9下点击的话option的位置错位了,而且也适合IE10一样选中的渲染不到页面上

搞了一次IE浏览器兼容,我有点奔溃....的更多相关文章

  1. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  2. CSS-各种cs样式之浏览器兼容处理方式汇总大全（更新中...）

    页面模板 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 ...

  3. 浅谈CSS hack（浏览器兼容）

    今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...

  4. jQuery-1.9.1源码分析系列（七） 钩子（hooks）机制及浏览器兼容

    处理浏览器兼容问题实际上不是jQuery的精髓,毕竟让技术员想方设法取弥补浏览器的过错从而使得代码乱七八糟不是个好事.一些特殊情况的处理,完全实在浪费浏览器的性能:突兀的兼容解决使得的代码看起来既不美 ...

  5. 【跟着子迟品 underscore】for ... in 存在的浏览器兼容问题你造吗

    Why underscore 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. 阅读一些著名框架类库的源码,就好像和一个个大师对 ...

  6. 浏览器兼容innerText nextElementSibling firstElementChild

    //下面是封装的方法,可以直接使用 //获dom对象的innerText的取值 function getInnerText(element){ //判断浏览器是否支持innerText if(type ...

  7. web前端~~浏览器兼容问题（百度）

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  8. 关于浏览器兼容问题及hack写法

    浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( ...

  9. 转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

随机推荐

  1. web前端面试题总结（html、css）

    1.对 WEB 标准以及 W3C 的理解与认识? 参考: 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链 css 和 js 脚本. 结构行为表现的分离.文件下载与页面速度更快.内容能 ...

  2. C# 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”

    “Microsoft.Jet.OLEDB.4.0” 是数据库接口驱动,用来连接数据库的,一般多用于连Access和Excel.我在在winform开发时,在本地运行没有问题,可是部署到另一台服务器上就 ...

  3. 微信小程序 + thinkjs + mongoDB 实现简单的前后端交互

    说明:这段时间跟老师学习了一下mongodb数据库,这次也是第一次搭建后台服务,出了不少差错,特此来复盘一下,非常感谢对我提供帮助的同学~ 一.使用 thinkjs + mongodb 创建后台服务 ...

  4. 新闻实时分析系统-Flume+HBase+Kafka集成与开发

    1.下载Flume源码并导入Idea开发工具 1)将apache-flume-1.7.0-src.tar.gz源码下载到本地解压 2)通过idea导入flume源码 打开idea开发工具,选择File ...

  5. 【Luogu P1168】【Luogu P1801&UVA 501】中位数&黑匣子（Black Box）——对顶堆相关

    Luogu P1168 Luogu P1801 UVA 501(洛谷Remote Judge) 前置知识:堆.优先队列STL的使用 对顶堆 是一种在线维护第\(k\)小的算法. 其实就是开两个堆,一个 ...

  6. java中sleep()和wait()区别

    1,sleep方法是Thread类的静态方法,wait()是Object超类的成员方法 2,sleep()方法导致了程序暂停执行指定的时间,让出cpu该其他线程,但是他的监控状态依然保持者,当指定的时 ...

  7. 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU启动那些事（2）- Boot配置(ISP_Pin, OTP)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的Boot配置. 在上一篇文章 Boot简介 里痞子衡为大家介绍了Boot基本原理以及i.MXRTx ...

  8. UVA439 骑士的移动 Knight Moves

    #include<bits/stdc++.h> using namespace std; char a,c; int b,d; ][]; ]={,,,-,,-,-,-}; ]={,-,,, ...

  9. python名称空间和作用域

    python名称空间和作用域 名称空间 名称空间:例如a=1000,python解释器会开辟一块新的内存来存贮1000这个变量值,然后会有一个a指向这个1000,那么a存在哪里?其实他和变量值差不多, ...

  10. 队列&生产者消费者模型

    队列 ipc机制:进程通讯 管道:pipe 基于共享的内存空间 队列:pipe+锁 queue from multiprocessing import Process,Queue ### 案例一 q ...