getElementsByClassName в IE9 не работает

Я пытаюсь скрыть или показать баннер в зависимости от размера экрана. Тем не менее, он не показывает никаких баннеров в 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, о которой я не знаю?

1 ответ

ИМХО, я полагаю, вам не хватает какой-то конфигурации или мета-тега в вашей HTML-голове, так как IE нужен режим стандартов, я однажды сталкивался с этой проблемой и решил ее, добавив:

<!Doctype html>

также я видел добавление <meta http-equiv="X-UA-Compatible" content="IE=edge" /> решает это на некоторых сайтах

Надеюсь это поможет!

Другие вопросы по тегам