知向前端
记录下关于ie浏览器的几个兼容性问题
2016-4-9 Jon


1.ie9不支持createContextualFragment属性或方法(ie中只有ie9不支持)



解决方法:把下面的代码放入js文件的头部




if ((typeof Range !== "undefined") && !Range.prototype.createContextualFragment) {

    Range.prototype.createContextualFragment = function(html) {

      var frag = document.createDocumentFragment(),div = document.createElement("div");

      frag.appendChild(div);

      div.outerHTML = html;

      return frag;

    };

  }








2.IE6、IE7不支持querySelectorAll和querySelector方法



解决方案:入ie7Select.js 如下




// 用于在IE6和IE7浏览器中,支持Element.querySelectorAll和Element.querySelector方法

  if (!document.querySelectorAll) {

      document.querySelectorAll = function (selectors) {

          var style = document.createElement('style'), elements = [], element;

          document.documentElement.firstChild.appendChild(style);

          document._qsa = [];

          style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';

          window.scrollBy(0, 0);

          style.parentNode.removeChild(style);

          while (document._qsa.length) {

              element = document._qsa.shift();

              element.style.removeAttribute('x-qsa');

              elements.push(element);

          }

          document._qsa = null;

          return elements;

      };

  }

  if (!document.querySelector) {

      document.querySelector = function (selectors) {

          var elements = document.querySelectorAll(selectors);

          return (elements.length) ? elements[0] : null;

      };

  }

  var qsaWorker = (function () {

      var idAllocator = 10000;

      function qsaWorkerShim(element, selector) {

          var needsID = element.id === "";

          if (needsID) {

              ++idAllocator;

              element.id = "__qsa" + idAllocator;

          }

          try {

              return document.querySelectorAll("#" + element.id + " " + selector);

          }

          finally {

              if (needsID) {

                  element.id = "";

              }

          }

      }

      function qsaWorkerWrap(element, selector) {

          return element.querySelectorAll(selector);

      }

      // Return the one this browser wants to use

      return document.createElement('div').querySelectorAll ? qsaWorkerWrap : qsaWorkerShim;

  })();



在页面引入


<!--[if lte IE 8]>

  <script type="text/javascript" src="js/ie7Select.js"></script>

<![endif]-->




提示虽然可以使用querySelector这个方法,但是querySelector在ie7下获取不到display:none的元素,并且只能查找某个特定元素如('.ceshi'),不支持('.ceshi span'),所以考虑兼容性一般还是不要使用。








3.老问题记录下(ie6/7/8不支持textContentinnerHTML、outerHTML、innerText、textContent区别




  element.innerHTML和element.outerHTML(所有浏览器支持)

  element.innerText(非标准,火狐不支持)

  element.textContent(ie8以下不支持)

  一般获取某个元素的内部代码用element.innerHTML

  一般获取某个元素的代码包括本身用element.outerHTML

  一般获取某个元素里面的文本用(兼容性写法)

    1.element.innerText || element.textContent

    2.element.textContent?element.textContent=s:element.innerText=s;








4.比较好的jquery 引入方法





<!--[if lt IE 9]>

  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<![endif]-->

<!--[if gte IE 9]>

  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<![endif]-->

<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>




发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容