浏览器兼容问题(主要时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. Vue packages version mismatch版本问题的解决

    今天下载了一个vue项目,npm run dev 时发现报错,错误信息入下: error in .src/components/mobile/SeniorDetail.vue Module build ...

  2. vue动态样式设置

    思路: 通过 v-bind:class="true ? style1 : style2 " 配合三元表达式完成样式的切换 具体实现 //return设置控制的参数 //有多个需要样 ...

  3. Windows 10上源码编译glog和gflags 编写glog-config.cmake和gflags-config.cmake | compile glog and glags on windows from source

    本文首发于个人博客https://kezunlin.me/post/bb64e398/,欢迎阅读! compile glog v0.3.5 and glags on windows from sour ...

  4. C#异步案例一则

    场景 生产者和消费者队列, 生产者有多个, 消费者也有多个, 生产到消费需要异步. 下面用一个Asp.NetCore Web-API项目来模拟 创建两个API, 一个Get(), 一个Set(), G ...

  5. Fragment事务管理源码分析

    转载请标明出处:http://blog.csdn.net/shensky711/article/details/53132952 本文出自: [HansChen的博客] 概述 在Fragment使用中 ...

  6. Spring Boot整合Mybatis报错InstantiationException: tk.mybatis.mapper.provider.base.BaseSelectProvider

    Spring Boot整合Mybatis时一直报错 后来发现原来主配置类上的MapperScan导错了包 由于我使用了通用Mapper,所以应该导入通用mapper这个包

  7. 科学使用Log4View2

    目录 目录 前言 科学使用 编辑和调试程序集 调试程序集 编辑程序集 结语 推荐文献 目录 NLog日志框架使用探究-1 NLog日志框架使用探究-2 科学使用Log4View2 前言 这个标题很低调 ...

  8. 以传参的方式执行shell(模板)

    以传参的方式执行shell(模板) #!bin/bash # USE: Template # author : xiaowei # -- # state : -name 选项必选,,, -v -m 选 ...

  9. SpringBoot 整合mongoDB并自定义连接池

    SpringBoot 整合mongoDB并自定义连接池 得力于SpringBoot的特性,整合mongoDB是很容易的,我们整合mongoDB的目的就是想用它给我们提供的mongoTemplate,它 ...

  10. MySQL的5种时间类型的比较

    日期时间类型 占用空间 日期格式 最小值 最大值 零值表示 DATETIME 8 bytes YYYY-MM-DD HH:MM:SS 1000-01-01 00:00:00 9999-12-31 23 ...