IE7 Queryselector не находит элементы

Question

if (!document.querySelectorAll)
  document.querySelectorAll = function(selector) {
    var head = document.documentElement.firstChild;
    var styleTag = document.createElement("STYLE");
    head.appendChild(styleTag);
    document.__qsResult = [];

    styleTag.styleSheet.cssText = selector+"{x:expression(document.__qsResult.push(this))}";
    window.scrollBy(0, 0);
    head.removeChild(styleTag);

    var result = [];
    for (var i in document.__qsResult)
      result.push(document.__qsResult[i]);
    return result;
  }

 var tabs = document.querySelectorAll(".tab");
 var descriptionTabs = document.querySelectorAll(".descriptionTab");
 var hireTabs = document.querySelectorAll(".hireTab");
 var salesTabs = document.querySelectorAll(".salesTab");
 var lazyImages = document.querySelectorAll(".lazy");



console.log(tabs.length);
console.log(hireTabs.length);
console.log(salesTabs.length);
console.log(descriptionTabs.length);
console.log(lazyImages.length);

<img class="imageThumbs lazy" src="">
<img class="imageThumbs lazy" src="">
<img class="imageThumbs lazy" src="">
<img class="imageThumbs" src="">

<div class="tabContainer">
     <div class="descriptionTab tab">Description</div>
     <div class="hireTab tab">HireTab</div>
     <div class="salesTab tab">SalesTab</div>
</div>

У меня странная проблема с IE, режим документа 7.

Самое странное, что мои функции работают нормально в режимах документа5 и 8.

Некоторые элементы не найдены.Когда я проверяю инструменты разработчика браузеров, они там, в документе HTML.

Я не могу понять, почему эти инструменты неверны в этой конкретной версии IE, а все остальные работают нормально.

Надеюсь, у кого-то есть идея.Заранее спасибо.

РЕДАКТИРОВАТЬ:

Это отдельный сценарий для более ранних версий IE.Я использую getElementsByClassName в другом скрипте.

Тег скрипта находится внизу HTML-страницы.

Работает везде, кроме IE7.

РЕДАКТИРОВАТЬ: изменить код на фрагмент.

РЕДАКТИРОВАТЬ: я определил проблему, шаг за шагом.

styleTag.styleSheet.cssText = selector+"{x:expression(document.__qsResult.push(this))}";

Эта строка, кажется, работает с некоторыми элементами, а не с другими, поэтому их не толкают.Насколько я вижу, нет никакой разницы между

var descriptionTabs = document.querySelectorAll(".descriptionTab");

, который работает, и

var hireTabs = document.querySelectorAll(".hireTab");

, который не работает.

FinalEdit (я сдаюсь):Результаты могут отличаться в зависимости от порядка выбора запросов.

Answer 1

После некоторых копаний я нашел решение на Github.

https://gist.github.com/Fusselwurm/4673695

(function () {
    var
        style = document.createStyleSheet(),
        select = function (selector, maxCount) {
            var
                all = document.all,
                l = all.length,
                i,
                resultSet = [];

            style.addRule(selector, "foo:bar");
            for (i = 0; i < l; i += 1) {
                if (all[i].currentStyle.foo === "bar") {
                    resultSet.push(all[i]);
                    if (resultSet.length > maxCount) {
                        break;
                    }
                }
            }
            style.removeRule(0);
            return resultSet;

        };

    //  be rly sure not to destroy a thing!
    if (document.querySelectorAll || document.querySelector) {
        return;
    }

    document.querySelectorAll = function (selector) {
        return select(selector, Infinity);
    };
    document.querySelector = function (selector) {
        return select(selector, 1)[0] || null;
    };
}());

Это работает во всех более ранних версиях IE.Я только что заменил полифилл, который использовал ранее.

Answer 2

Не поддерживается, https://caniuse.com/#feat=queryselector

Вы можете использовать альтернативы, такие как findElementById или findElementByClassName