duankua3620 2018-06-12 21:49
浏览 104

getElementById无法处理IE 11：HTML5 <article>元素

I'm currently building out a new website, and naturally, Internet Explorer is giving me trouble. I have some Javascript that's intended to reveal an element with an onclick.

It works exactly as intended on other browsers, but testing on IE 11 has lead me into one headache after another.

Internet Explorer is driving me nuts while I figure this out. A live example for the page effected is here: http://beerworld.sandbox.nikijones.com/whats-on-tap/

The elements effected by the bug are generated here:

<? foreach($beer_array as $beer){
                    $post = $beer['beer'];
                    setup_postdata( $post );  
                    $post_slug=$post->post_name; ?>
                    <article id="board-<? echo $post_slug; ?>" class="tap-board" >
                        <span class="tap-board-head">
                            <? $logo = get_field('logo');?><img class="board-logo" src="<? echo $logo['url']; ?>" alt="<? echo $logo['alt']; ?>" /><h1><? the_title(); ?></h1>
                        </span>
                        <div class="row stats">
                            <? $brewery = get_field('brewery'); if(!empty($brewery)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
                                <h3>Brewery:&nbsp;</h3><? echo $brewery; ?>
                            </div> <? } ?>
                            <? $style = get_field('style'); if(!empty($style)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
                                <h3>Style:&nbsp;</h3><? echo $style; ?>
                            </div> <? } ?>
                            <? $color = get_field('SRM'); if(!empty($color)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
                                <h3>Color&nbsp;Rating:&nbsp;</h3><? echo $color; ?>
                            </div> <? } ?>
                            <? $location = get_field('location'); if(!empty($location)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
                                <h3>Location:&nbsp;</h3><? echo $location; ?>
                            </div> <? } ?>
                            <? $ABV = get_field('ABV'); if(!empty($ABV)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
                                <h3>ABV:&nbsp;</h3><? echo $ABV . "%" ; ?>
                            </div> <? } ?>
                            <? $IBU = get_field('IBU'); if(!empty($IBU)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
                                <h3>Hop:&nbsp;</h3><? echo $IBU; ?>
                            </div> <? } ?>
                        </div>
                        <div class="row">
                            <? $desc = get_field('description'); if(!empty($desc)){ ?> <div class="col">
                            <h3>Description:&nbsp;</h3><p><? echo $desc ?></p>
                            </div> <? } ?>
                            <? $taste = get_field('tasting_notes'); if(!empty($taste)){ ?> <div class="col">
                                <h3>Tasting&nbsp;Notes:&nbsp;</h3><p><? echo $taste ; ?></p>
                            </div> <? } ?>
                            <? $food = get_field('food'); if(!empty($food)){ ?> <div class="col">
                                <h3>Food&nbsp;Pairing:&nbsp;</h3><p><? echo $food; ?></p>
                            </div> <? } ?>
                        </div>
                    </article>
                <? } ?>

And the script that only partially executes is here:

<script>        

    function boardswap(slug){   
        /* This function is for changing active taps, continued from the tap() function */

        var board_ID = "board-".concat(slug);
        var tap_ID = "tap-".concat(slug);

        /* Chalk Board Section */
        var activeBoard = document.getElementById(board_ID);
        activeBoard.style.height = 'initial';
        activeBoard.style.overflow = 'unset';
        activeBoard.style.opacity = '1';

        /*Display*/
        document.getElementById('tap-beer-display').style.height = '800px';
        document.getElementById('tap-beer-display').style.minHeight = 'fit-content';
        document.getElementById('tap-beer-display').classList.remove("rotated");
    }


    function tap(slug){

        var board_ID = "board-".concat(slug);
        var tap_ID = "tap-".concat(slug);

        /* Chalk Board Section */
        document.getElementById('tap-beer-display').classList.add("rotated");
        var boards = document.getElementsByClassName('tap-board');
        for (var i = 0; i < boards.length; i++){
            boards[i].style.height = '0';
            boards[i].style.overflow = 'hidden';
            boards[i].style.opacity = '0';
        }

        /* Taps Section */

        var taps = document.getElementsByClassName('tap');
        for (var i = 0; i < boards.length; i++){
            taps[i].style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap.png)';
        }

        var activeTap = document.getElementById(tap_ID);
        activeTap.style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap-active.png)';

        /* Pause before continuing */
        setTimeout(function(){ boardswap(slug); }, 1000);
    }

    </script>

All lines seem to trigger propperly with exception of the fact that on internet explorer, the article remains hidden by a height of zero.

These are the 3 PHP Files for the page to be absolutely thorough:

HEADER.PHP

<!DOCTYPE html>
<html lang="en">
  <head>
    <title><? the_title(); ?> - Beer World</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="<? echo get_template_directory_uri(); ?>/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<? echo get_template_directory_uri(); ?>/css/fontawesome-all.min.css">
    <link rel="stylesheet" type="text/css" href="<? echo get_template_directory_uri(); ?>/style.css">
       <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
       <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
       <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
       <![endif]-->
       <!-- WP Head Includes -->
     <?php wp_head(); ?>

       <!-- Fancy Box Image Lightbox -->
        <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>

       <!-- Google Analytics Code -->
          <!-- Global site tag (gtag.js) - Google Analytics -->
            <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118283566-1"></script>
            <script>
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', 'UA-118283566-1');
            </script>

       <!-- Facebook Pixel Code -->
          <!-- No code yet -->
  </head>
  <body id="body" <? body_class(); ?> onscroll="scrollHead();">
    <!-- jQuery -->
    <script src="<? echo get_template_directory_uri(); ?>/js/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap -->
    <script src="<? echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>
    <video id="bgVideo" preload autoplay muted loop >
        <source src="/wp-content/uploads/053119795-beer-bubbles-and-foam-slow-mot_H264_420-1.mov">
        <source src="/wp-content/uploads/Beer-Bubbles-and-Foam-Slow-Motion.ogg" />
        <source src="/wp-content/uploads/Beer-Bubbles-and-Foam-Slow-Motion.mp4" />
    </video>
    <div id="site-wrap">
    <div id="bg-gradient">
        <!-- Background Orange Gradient -->
    </div>
    <div class="container">
        <header id="header">
            <div id="social">
                <a href="https://www.facebook.com/beerworldnewwindsor/" ><img src="<? echo get_template_directory_uri(); ?>/img/social-fb.png" alt="Facebook" /></a>
                <a href="https://twitter.com/beerworldstore2" ><img src="<? echo get_template_directory_uri(); ?>/img/social-twitter.png" alt="Twitter" /></a>
                <a href="#" ><img src="<? echo get_template_directory_uri(); ?>/img/social-li.png" alt="Linkedin" /></a>
            </div>
            <nav class="navbar navbar-expand-lg">
                <!-- Button Created from Codepen By Collin Smith: https://codepen.io/collinscode/full/JLXJZY -->
                <button class="navbar-toggler back" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="hamburger();">
                    <span class="navbar-toggler-icon">
                        <div class="btn1 btn">
                            <div class="bar-container">
                                <div class="bar1 bar"></div>
                                <div class="bar2 bar"></div>
                                <div class="bar3 bar"></div>
                            </div>
                        </div>
                    </span>
                </button>
                <? $headArgs = array('menu' => 'Header Menu' ,
                                     'menu_class' => 'navbar-nav nav-fill' ,
                                     'menu_id' => '' ,
                                     'container' => 'div' ,
                                     'container_class' => '' ,
                                     'container_id' => 'HeaderMenu' ,
                                     'before' => '' ,
                                     'after' => '' ,
                                     'link_before' => '' ,
                                     'theme_location' => 'Header Menu',
                                     'link_after' => '');
                  wp_nav_menu($headArgs); ?>
            </nav>
            <img src="<? echo get_template_directory_uri(); ?>/img/logo.svg" alt="Beer World Logo" id="navLogo" />
        <?/* * * NIVO SLIDER REPLACED BY REVOLUTION SLIDER ON JUNE 6, 2018 * * /
            <!-- Nivo Slider -->
            <? if(get_field('header_slider')){ ?>
                <div class="slider-wrapper theme-default">
                    <div id="slider" class="nivoSlider">
                        <? $images = get_field('header_slideshow'); ?>
                        <? foreach( $images as $image ): ?>
                        <img src="<? echo $image['sizes']['large']; ?>" data-thumb="<? echo $image['sizes']['thumbnail']; ?>" alt="<? echo $image['alt']; ?>" class="nivo-img" />
                        <? endforeach; ?>
                    </div>
                </div>
        </header>
      */ ?>

      <!-- Revolution Slider -->
      <? $term = get_queried_object(); ?>

      <? if(get_field('header_slider', $term)){ 
            $slides = strval(get_field('header_slideshow', $term));
            echo do_shortcode($slides);
        }else{ ?>
            <div id="spacer"><!-- No Active Slider For This Page --></div>
        <? } ?>

PAGE TEMPLATE:

<?php
/**
 * Template Name: What's On Tap
 * 
 * @package WordPress
 * @subpackage Beerworld
 * @since Beerworld 2.0
 */
?>

<? get_header(); ?>
</header>
<script>        

function boardswap(slug){   
    /* This function is for changing active taps, continued from the tap() function */

    var board_ID = "board-".concat(slug);
    var tap_ID = "tap-".concat(slug);

    /* Chalk Board Section */
    var activeBoard = document.getElementById(board_ID);
    activeBoard.style.height = 'initial';
    activeBoard.style.overflow = 'unset';
    activeBoard.style.opacity = '1';

    /*Display*/
    document.getElementById('tap-beer-display').style.height = '800px';
    document.getElementById('tap-beer-display').style.minHeight = 'fit-content';
    document.getElementById('tap-beer-display').classList.remove("rotated");
}


function tap(slug){

    var board_ID = "board-".concat(slug);
    var tap_ID = "tap-".concat(slug);

    /* Chalk Board Section */
    document.getElementById('tap-beer-display').classList.add("rotated");
    var boards = document.getElementsByClassName('tap-board');
    for (var i = 0; i < boards.length; i++){
        boards[i].style.height = '0';
        boards[i].style.overflow = 'hidden';
        boards[i].style.opacity = '0';
    }

    /* Taps Section */

    var taps = document.getElementsByClassName('tap');
    for (var i = 0; i < boards.length; i++){
        taps[i].style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap.png)';
    }

    var activeTap = document.getElementById(tap_ID);
    activeTap.style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap-active.png)';

    /* Pause before continuing */
    setTimeout(function(){ boardswap(slug); }, 1000);
}

</script>

<main id="content-area"><?
if (have_posts()){
   while (have_posts()){
      the_post();
       $beer_array = get_field('beers');
        /* Beer Display Area */ ?>
        <div id="tap-beer-display" class="container" >
            <div class="row">
                <h2>
                    TRY ONE OF OUR 24 FRESH, DRAFT BEERS
                </h2>
            </div>
            <? foreach($beer_array as $beer){
                $post = $beer['beer'];
                setup_postdata( $post );  
                $post_slug=$post->post_name; ?>
                <article id="board-<? echo $post_slug; ?>" class="tap-board" >
                    <span class="tap-board-head">
                        <? $logo = get_field('logo');?><img class="board-logo" src="<? echo $logo['url']; ?>" alt="<? echo $logo['alt']; ?>" /><h1><? the_title(); ?></h1>
                    </span>
                    <div class="row stats">
                        <? $brewery = get_field('brewery'); if(!empty($brewery)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
                            <h3>Brewery:&nbsp;</h3><? echo $brewery; ?>
                        </div> <? } ?>
                        <? $style = get_field('style'); if(!empty($style)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
                            <h3>Style:&nbsp;</h3><? echo $style; ?>
                        </div> <? } ?>
                        <? $color = get_field('SRM'); if(!empty($color)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
                            <h3>Color&nbsp;Rating:&nbsp;</h3><? echo $color; ?>
                        </div> <? } ?>
                        <? $location = get_field('location'); if(!empty($location)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
                            <h3>Location:&nbsp;</h3><? echo $location; ?>
                        </div> <? } ?>
                        <? $ABV = get_field('ABV'); if(!empty($ABV)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
                            <h3>ABV:&nbsp;</h3><? echo $ABV . "%" ; ?>
                        </div> <? } ?>
                        <? $IBU = get_field('IBU'); if(!empty($IBU)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
                            <h3>Hop:&nbsp;</h3><? echo $IBU; ?>
                        </div> <? } ?>
                    </div>
                    <div class="row">
                        <? $desc = get_field('description'); if(!empty($desc)){ ?> <div class="col">
                        <h3>Description:&nbsp;</h3><p><? echo $desc ?></p>
                        </div> <? } ?>
                        <? $taste = get_field('tasting_notes'); if(!empty($taste)){ ?> <div class="col">
                            <h3>Tasting&nbsp;Notes:&nbsp;</h3><p><? echo $taste ; ?></p>
                        </div> <? } ?>
                        <? $food = get_field('food'); if(!empty($food)){ ?> <div class="col">
                            <h3>Food&nbsp;Pairing:&nbsp;</h3><p><? echo $food; ?></p>
                        </div> <? } ?>
                    </div>
                </article>
            <? }
            wp_reset_postdata(); ?>
        </div>
        <div id="tap-click" >
            <h2>
                CLICK ON ANY TAP BELOW
            </h2>
            <div class="row" >
                <? foreach($beer_array as $beer){
                    $post = $beer['beer'];
                    setup_postdata( $post );
                    $post_slug=$post->post_name;?>
                    <div class="tap" onclick="tap('<? echo $post_slug; ?>')" id="tap-<? echo $post_slug; ?>" >
                        <? $logo = get_field('logo'); ?><img class="tap-logo" src="<? echo $logo['url']; ?>" alt="<? echo $logo['alt']; ?>" />
                    </div>
                <? }
                wp_reset_postdata(); ?>
            </div>
        </div>
        <div id="tap-blurb" >
            <? the_content(); ?>
        </div>
 <? }
}
?></main>
<? get_footer(); ?>

FOOTER.PHP

</div>
<div id="foot">
    <img src="<? echo get_template_directory_uri(); ?>/img/left-wheat.png" alt="bottom left wheat decoration" class="wheat left" />
    <footer class="container">
        <nav class='col-12'>
            <? 
            $footArgs = array(
                'menu' => 'Footer' ,
                'menu_class' => 'navbar-nav' ,
                'menu_id' => 'foot-menu' ,
                'container' => 'div' ,
                'container_class' => '' ,
                'container_id' => 'footerMenu' ,
                'before' => '' ,
                'after' => '' ,
                'link_before' => '' ,
                'link_after' => '',
                'theme_location' => 'Footer Menu');

            wp_nav_menu($footArgs); 
            ?>
        </nav>
        <div class="row" id="foot-info">
            <div class='col-12 col-sm-12 col-md-12 col-lg-6'>
                <img id="foot-logo" src="<? echo get_template_directory_uri(); ?>/img/logo.png" alt="Beer World Logo" style="width: 160px; max-width: 160px; min-width: 160px;" />
                <span style="display:block;"><span style="font-size:22pt;" >BEER WORLD</span> <a href="https://www.google.com/maps/dir/Current+Location/323+Windsor+Highway+New+Windsor+New+York" style="color: white;">323 Windsor Highway • New Windsor, New York</a></span>
                <span><a style="color: white;" href="tel:8455612244">845.561.2244</a> | <a style="color: white;" href="mailto:Info@beerworld.com">Info@beerworld.com</a></span>
            </div>
            <div class='col-12 col-sm-12 col-md-12 col-lg-6'>
                <p style="text-align:right;">© 2018 BEER WORLD&nbsp;&nbsp;<br />WEBSITE DESIGN BY THE NIKI JONES AGENCY, INC.&nbsp;&nbsp;</p>
            </div>
        </div>
    </footer>
    <img src="<? echo get_template_directory_uri(); ?>/img/right-wheat.png" alt="bottom right wheat decoration" class="wheat right" />
</div>
</div>
<?php wp_footer(); ?>
<script type="text/javascript" src="<? echo get_template_directory_uri(); ?>/js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
 $(window).on('load', function() {
    $('#slider').nivoSlider();
  });

//Navbar Hamburger Script
function hamburger(){
  var toggler = $('#header').find('.navbar-toggler');
  if (toggler.hasClass('active')) {
      toggler.removeClass('active');
      toggler.addClass('back');
    }else{
      toggler.removeClass('back');
      toggler.addClass('active');
    }
  }

var $document = $('#body'),
    $element = $('#header'),
    className = 'hasScrolled';

$document.scroll(function() {
  if ($document.scrollTop() >= 20) {
    // user scrolled 20 pixels or more;
    $element.addClass(className);
  } else {
    $element.removeClass(className);
  }
});
</script>

<script src="<? echo get_template_directory_uri(); ?>/js/ada.js"></script>
  • 写回答

1条回答 默认 最新

  • dongzhang8680 2018-06-12 21:52
    关注

    Probably you forgot to add <!DOCTYPE html> at the begining of the page, so IE switches to 5.5 emulation, makes tag self-closing and you get an empty element.

    评论

报告相同问题？

悬赏问题

  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘