querySelector和querySelectorAll在IE6和IE7下的兼容性问题

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;
    };
}

// 用于在IE6和IE7浏览器中,支持Element.querySelectorAll方法
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;
})();

原文地址:https://www.cnblogs.com/wangshengli520/p/8778369.html

时间: 2024-07-31 10:25:43

querySelector和querySelectorAll在IE6和IE7下的兼容性问题的相关文章

【css】a:hover 设置上下边框在 ie6 和 ie7 下失效

前段时间在写样式的时候发现了这个问题,虽然当时就解决了这个 bug 不过还是记录下,以免再次出现这样的问题. demo 代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"

【css】ie6 和 ie7 下 position 与 overflow 的问题

前几天做的项目中碰到这样一个问题,在 ie6 和 ie7 下,给父元素设置 overflow:hidden 不起作用无法隐藏,后来发现是子元素中有设置 position:relative,如果子元素删除 position:relative,那么父元素的 overflow:hidden 可以隐藏,具体代码及效果如下: html 代码: <!doctype html> <html lang="en"> <head> <meta charset=&q

关于JSON.parse在ie6,ie7下未定义的issue

情况是这样的: 在ie6下出现一个js error,说是JSON.parse为定义,一查,才知道,ie6,ie7不支持JSON. solution:只要在使用JSON之前加载个json2.js就行了. 参考:http://stackoverflow.com/questions/2503175/json-on-ie6-ie7 json2.js 下载: https://github.com/douglascrockford/JSON-js

ie6和ie7下z-index bug的解决办法

一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是flash中层的概念是一致的.熟悉photoshop或是flash的应该知道,层级越高(图层越靠上),越在上 面显示,如果层发生重叠,层级高的会覆盖层级低的,如果非透明或半透明,则会遮挡. 在photoshop中,层的高低就是靠手动调的,鼠标拖拽,或是ctrl+]或是ctrl+shift+[快捷键改

margin-bottom在IE6和IE7下失效的解决办法

IE6/7下margin-bottom无效一般出现在容器里某元素设置后在父容器内无效,这个时候只需要在父容器中加入以下两句css,基本上所有的浏览器都兼容了: overflow:hidden;zoom:100%;

解决IE6,ie7下元素左浮动自动换行的问题

html结构如下: xhtml代码 <ul> <li><a href="category.php?id=7">考研英语</a></li> <li><a href="category.php?id=8">考研数学</a></li> <li><a href="category.php?id=9">考研政治</a&g

IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

首先我们来看一个代码: 复制代码代码如下:<div id="layer1″ style="margin:20px; border:1px solid #F88; width:400px; "> <div id="layer2″ style="position:absolute; background-color:#ccc;">Absolute (layer2)</div> <div id="la

IE6/IE7下:inline-block解决方案(转)

原文地址:http://blog.sina.com.cn/s/blog_60b35e8301019hk2.html 1.inline元素(比如span,em等)的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的:直接贴代码:<div class="list">  <span>无标题文档无标题文档</span>  <sp

base64编码用在HTML(支持IE6、IE7、IE8)

在HTML使用base64编码, 叫做Data URI scheme. Data URI scheme目前支持的类型有:(2016-10-19) data:,文本字串data:text/plain,%sdata:text/html,%sdata:text/html;base64,%sdata:text/css,%sdata:text/css;base64,%sdata:text/javascript,%sdata:text/javascript;base64,%sdata:image/gif;b