浏览器兼容问题(主要时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. class继承关键字extends和super

    // 父类 class person { constructor (name,age) { this.name = name this.age = age } } class CheChinese e ...

  2. var与let与const

    var与let与const都是用来声明变量,但是三者之间也有一些区别 var的使用 var a;//声明变量a var a,b,c;//声明三个变量a,b,c var a,b,c=2;//声明了三个变 ...

  3. 官网例子，mt-field password获取不到

    新尝试了Mint-UI,在使用表单组件Field时, 直接从demo中拷贝了如下代码: <mt-field label="username" placeholder=&quo ...

  4. php中 continue break exit return 的区别

    php 中的循环有 for foreache while do{} whlie这几种. 1.continue continue是用来在循环结构中,控制程序放弃本次循环continue: 之后的语句,并 ...

  5. 扛把子组作业要求 20191024-3 互评Alpha阶段作品

    此作业的要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/9860] 组名:扛把子 组长:迟俊文 组员:宋晓丽 梁梦瑶 韩昊 刘信鹏 ...

  6. matlab-汉字unicode编码转换

    str='黑大哥'bianma=unicode2native(str); disp(bianma); pp=native2unicode(bianma);disp(pp)

  7. python中的random模块简析

    在Python生成随机数用random模块,下面的文章是本人自己简单总结的ython生成随机数与random模块中最常用的几个函数的关系,希望对大家有所帮助. random.random()用于生成随 ...

  8. yum运行报错：File "/usr/bin/yum", line 30 except KeyboardInterrupt, e: ^SyntaxError: invalid syntax

    这是由于Python升级导致 备份Python 历史版本 [root@sdw1 autoconf]# ls /usr/bin/python* [root@sdw1 autoconf]# mv /usr ...

  9. httpclient常规封装的方法

    <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-compr ...

  10. Spring Cloud（二）：Eureka 服务注册中心

    前言 服务治理 随着业务的发展,微服务应用也随之增加,这些服务的管理和治理会越来越难,并且集群规模.服务位置.服务命名都会发生变化,手动维护的方式极易发生错误或是命名冲突等问题.而服务治理正是为了解决 ...