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

恕我直言，我想您会因为IE需要标准模式而错过html头中的某些配置或meta标签，我曾经遇到过此问题，因此我通过添加来解决了此问题，

<!Doctype html>

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

希望这可以帮助！