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

时间:2018-06-12 21:49:02

标签: javascript php html5 getelementbyid semantic-markup

我目前正在建立一个新网站,当然,Internet Explorer给我带来了麻烦。我有一些Javascript旨在揭示带有onclick的元素。

它的工作方式与其他浏览器完全一样,但在IE 11上的测试让我头疼不已。

当我弄清楚这一点时,Internet Explorer让我疯了。该页面的实时示例如下:http://beerworld.sandbox.nikijones.com/whats-on-tap/

这里生成了由bug影响的元素:

<? 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>
                <? } ?>

只有部分执行的脚本在这里:

<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>

除了在互联网资源管理器上,文章仍然隐藏在零高度之外,所有行似乎都是正确触发的。

这些页面的3个PHP文件绝对是彻底的:

的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模板:

<?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 个答案:

答案 0 :(得分:0)

可能你忘记在页面的开头添加<!DOCTYPE html>,因此IE切换到5.5模拟,使标签自动关闭,你得到一个空元素。