浏览器差异

最新推荐文章于 2024-07-18 20:36:34 发布

猩猩昵称被占用

最新推荐文章于 2024-07-18 20:36:34 发布

阅读量388

点赞数

CC 4.0 BY-SA版权

分类专栏：前端web 文章标签：浏览器 internet explorer 8 ie8 前端

本文链接：https://blog.youkuaiyun.com/wjx199110/article/details/44943065

前端web 专栏收录该内容

0 篇文章

订阅专栏

本文总结了在前端开发过程中遇到的IE7、8与其他浏览器之间的兼容性问题，包括bind函数的支持情况、keydown事件的使用差异、childNodes属性的问题等，并提供了相应的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端做了一段时间了，比较蛋疼的事情是IE7、8与其他的浏览器的差异，记下这些备忘。（是不是想说我闲的蛋疼要去维护IE7、8干嘛。。。你去问qa啊摔！

（1）bind函数：

Function.protype.bind这个函数还是蛮有用的，大部分浏览器都支持，nodejs也支持，除了万恶的IE。根据微软的官方文档，这玩意在以下浏览器模式中不支持：Quirks、Internet Explorer 6 标准模式、Internet Explorer 7 标准模式、Internet Explorer 8 标准模式。但是不用有时会蛋疼，好在Mozilla那边有兼容性代码提供，毕竟这玩意好像最先是Firefox支持的，代码如下

if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          return fToBind.apply(this instanceof fNOP
                 ? this
                 : oThis,
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}

代码的实现原理无非就是利用了protype来添加函数。

（2）document.keydown事件

经测试，IE8环境下，document.keydown=function(e){}这种场景下e是undefined，需要使用window.event;

（3）IE7不支持inherit

（4）childNodes属性还是别用了。。。比较坑爹。。。用children属性吧

（5）div的blur事件在元素没有tabindex属性的情况下无法激发

（6）Firefox不支持innerText属性，需要改用textContent，懒得改的换就用jQuery吧

（7）chrome下，似乎有tabindex属性的div，其内部的div的click事件无法激发，经测试，给内部div添加tabindex，改用focus事件可解决。