IE9 中的 getElementsByClassName 不起作用

Question

我正在尝试根据屏幕尺寸隐藏或显示横幅。但是，它没有在 IE9 中显示任何应有的横幅。这是我的代码：

<?php

// Template Setup

// Set SEO Infomation
// Available setting can be found under /app/extensions/Master-data.php
$this->set_master('page_title', 'Cancer Patient Assistance and Reimbursement for HCPs | Lilly PatientOne');
$this->set_master('meta_description', 'Lilly PatientOne offers financial assistance, patient assistance, and medical reimbursement for qualified cancer patients who are prescribed a Lilly Oncology product.');
$this->set_master('meta_keywords', 'patient assistance, cancer patient assistance, patient reimbursement, medical reimbursement, cancer patient assistance program, financial assistance for cancer patients');
$this->set_master('page_classes', 'index hcp');
$this->set_master('pageTitleHeader', 'PatientOne Access Services');
$this->set_master('pageTitleSubheader', 'Reimbursement <span class="bullet">&bull;</span> Financial Assistance <span class="bullet">&bull;</span> Product Replacement');

$this->set_master('site_nav', 'nav-hcp');
$this->set_master('site_footer', 'footer-hcp');
//$this->quick_link('Link Text', 'http://link-href.com');

// Set Layout
// Options:
// 'layouts::content-page' : 2 column
// 'layouts::wide' : wide
// 'layouts::home' : home
$this->layout('layouts::content-page');

// Page Content
?>
<div class="brand-image">
    <div class="no-desktop mobile-banner">
        <div class="blue-banner-mobile">
            <p>Update your billing and coding systems to include the permanent CYRAMZA<sup>&reg;</sup> (ramucirumab) J-code: J9308, injection, ramucirumab, 5 mg.  Issued by the Centers for Medicare &amp; Medicaid Services (CMS), this permanent J-code is effective as of January 1, 2016.</p>
        </div>
    </div>
    <div class="mobile-banner-spacing">
    <div class="banner-mobile-spacing small-desktop brand-image-wrapper content-container mobile-padding">
        <div class="large-desktop center-this">
            <?= $this->insert("partials::logo"); ?>
        </div>

        <div class="top-text center-this">
            <h1>PatientOne Access Services</h1>

            <p class="letterspace">Reimbursement • Financial Assistance • Product Replacement</p>

            <p class="p-two">Talk to a PatientOne representative</p>

            <p class="phone">Call <a href="tel:18664728663"><span>1-866-4PatOne</span><br/>(1-866-472-8663)</a></p>
        </div>
        <div class="home-bricks">
            <ul class="clearfix">

                <li class="brick-one brick">
                    <div class="brick-outer-wrapper">
                    <div class="brick-wrapper">
                        <h3>Find co-pay and financial assistance</h3>
                        <img src="../../assets/img/icons/brick_one_ico.png" alt="Lilly | Oncology"/>

                        <p>Learn about the options available for your patient.</p>
                        <a class="btn formsButton" href="financial-assistance-program.php" title="View now">View now</a>
                    </div>

                        </div>
                    <div class="brick-bottom"><img src="../../assets/img/bg/box_shadow_brick.png"
                                                   alt="Lilly | Oncology"/></div>
                </li>


                <li class="brick-two brick">
                    <div class="brick-outer-wrapper">
                    <div class="brick-wrapper">
                        <h3>See if your patient qualifies</h3>
                        <img src="../../assets/img/icons/brick_three_ico.png" alt="Lilly | Oncology"/>

                        <p>Read the eligibility requirements for PatientOne.</p>
                        <a class="btn formsButton" href="lilly-patientone-eligibility.php" title="Learn more">Learn
                            more</a></div>

                        </div>
                    <div class="brick-bottom"><img src="../../assets/img/bg/box_shadow_brick.png"
                                                   alt="Lilly | Oncology"/></div>
                </li>

                <li class="brick-three brick">
<div class="brick-outer-wrapper">
                    <div class="brick-wrapper">
                        <h3>Enroll your patient</h3>
                        <img src="../../assets/img/icons/brick_two_ico.png" alt="Lilly | Oncology"/>

                        <p>You need only one application for all PatientOne services.</p>
                        <a class="btn formsButton" target="_blank" href="/assets/pdf/patient_assistance_program_application.pdf" title="Go to form">Go
                            to form</a>
                    </div>

</div>
                    <div class="brick-bottom"><img src="../../assets/img/bg/box_shadow_brick.png"
                                                   alt="Lilly | Oncology"/></div>
                </li>


            </ul>
        </div>
    </div>
    <div class="blue-banner-main desktop-only">
        <p>Update your billing and coding systems to include the permanent CYRAMZA<sup>&reg;</sup> (ramucirumab) J-code: J9308, injection, ramucirumab, 5 mg.  Issued by the Centers for Medicare &amp; Medicaid Services (CMS), this permanent J-code is effective as of January 1, 2016.</p>
    </div>
</div>

<div class="main-content-banner-spacing">&nbsp;</div>

<div id="mainContent" class="content-container mobile-padding">
    <div class="column-one">

        <h2>Help your patients stay focused on treatment. <br/>Not how to pay for it.</h2>

        <p id="last">For some patients, especially those without insurance, facing the cost of cancer treatment may be
            almost as difficult as the diagnosis itself. When you prescribe a Lilly Oncology product, Lilly PatientOne
            provides a resource for access and reimbursement assistance. Through PatientOne you may be able to help your
            qualified patients get the assistance they need, allowing them to start treatment with one less worry.</p>

        <div class="colButton">
            <a href="financial-assistance-for-cancer-patients.php" title="Learn more about our programs">Learn more
                about our programs</a>
        </div>
        <h2>Patient Access Specialists, available through PatientOne</h2>

        <div id="boxParagraph">
            <p>Patient Access Specialists provide information and education to help you navigate the complex access and reimbursement landscape. We’re here to help make access to prescribed Lilly Oncology products easier for your patients.</p>

            <p>To learn more, call <a href="tel:18664728663" class="link-phone"><span class="lillyNumber noWrap">1-866-4PatOne (1-866-472-8663)</span></a>.</p>
        </div>
    </div>
    <div class="column-two">
        <?= $this->insert("partials::helpful-links"); ?>
    </div>
</div>
</div><!-- end mobile-banner-spacing -->
<script>
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    console.log(w);
    if(w < 769) {
        document.getElementsByClassName('blue-banner-mobile')[0].style.display = "block";
    } else {
        document.getElementsByClassName('blue-banner-main')[0].style.display = "block";
    }
</script>

我检查了“我可以使用”以获取浏览器支持参考，它说它受支持。我错过了什么，还是有某种我不知道的 IE9 怪癖？

Answer 1

恕我直言，我猜你错过了 html 头中的一些配置或元标记，因为 IE 需要标准模式，我曾经遇到过这个问题，我通过添加解决了它，

<!Doctype html>

我也看到在某些网站上添加 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 可以解决它

希望这会有所帮助！