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" />可以解決某些網站中的問題

希望這可以幫助！