HTML5音頻播放音樂，但在IE9

Question

不顯示控制對於此頁面上的音頻：http://ebonytay.com/site/composer.php?clip=getOutOfTown#mediaplayer

音頻控件在Chrome和Safari（和在Firefox中顯示本地我有一個具體問題。活服務器工作，但這是無關緊要的）。然而，在IE9中，音頻控制是不可見的。音樂仍在播放，如果您右鍵點擊它的位置，您可以播放/暫停播放，但它不會顯示。

我試着弄亂Z指數。我試過把它放在所有的div之外。我試過使用src =而不是source。我試過使用控件而不是controls =「controls」。我試過直接採用文件的音頻標籤，沒有任何PHP/Javascripting。我對編程相當陌生，所以我確信一些代碼可以寫得更簡單，但它不應該破壞任何東西。任何幫助，將不勝感激。

下面是頁面上的音頻播放器（不含CSS）的所有代碼：

<?php 
    $song = "overtureRedRockRise"; // set to starting song 
    $autoplay = ""; // disable autoplay on page load 
    $totalSlides = 1; //default amount of slides 
    $initialSlide = 1; //default starting slide 

    // Change song to URL parameter defined by links in #clip_nav div 
    if (isset($_GET["clip"])) // if URL parameter is ?clip=foo 
    { 
    $song = $_GET["clip"]; // $song is foo 
    $autoplay = "autoplay='autoplay'"; // enable autoplay when changing song 
    } 

    // Check how many slideshow images exist for current song 
    while (file_exists("../audio/filmClip_" . $song . "_" . $totalSlides . ".jpg")) 
    { 
    $totalSlides++; 
    } 
    $totalSlides--; // subtract 1 to get total number of slides for current song 
    ?> 

    <script> 
    $(document).ready(function() { 

     var currentSlide = 1; //default starting slide 
     var totalSlides; //number of slides for current song 
     var song; //current song 
     var slideSpeed; //current slideshow speed 

     // Get variables from PHP 
     totalSlides = <?php echo $totalSlides ?>; 
     song = "<?php echo $song ?>"; 

     // Setup slideshow speeds in milliseconds using JSON 
     var songSpeed = 
     [ 
      ['overtureRedRockRise',12000], 
      ['getOutOfTown',7000], 
      ['canyonBaby', 5000], 
      ['celestialGuides', 10000], 
      ['springback', 11000], 
      ['hallelujas', 10000], 
      ['myOnly', 8000], 
      ['selfDefense', 10000], 
      ['orchestral', 10000] 
     ] 

     //go through each song in array 
     for (i = 0; i < 9; i++) 
     { 
      //find the current song 
      if (song == songSpeed[i][0]) 
      { 
       //set current slideshow speed 
       slideSpeed = songSpeed[i][1] + 1000; //add 1 second for loading time 
      } 
     } 

     // Setup slideshow 
     function changeSlide() 
     { 
      // change current slide number 
      currentSlide++; 

      // Loop slideshow 
      if (currentSlide > totalSlides) { currentSlide = 1; } 

      // Display current slide 
      $('.song_image').attr('src', '../audio/filmClip_' + song + '_' + currentSlide + '.jpg'); 
     } 

     // If song has more than 1 image 
     if (totalSlides > 1) 
     { 
      // Play slideshow 
      setInterval(changeSlide, slideSpeed);  
     } 

     // Indicate current song 
     $('div.filmClip_list.'+song).addClass('currentSong'); 
    }); 
    </script> 

<h2><a id="mediaplayer"> SCORE AUDIO LIBRARY</a></h2> 
<div id="audio_clips"> 

    <!-- Song List --> 
    <div id="clip_nav"> 
     <div class="filmClip_list overtureRedRockRise"><a href="composer.php?clip=overtureRedRockRise#mediaplayer">Overture - Red Rock Rise</a></div> 
     <div class="filmClip_list getOutOfTown"><a href="composer.php?clip=getOutOfTown#mediaplayer">Get Out of Town Firehorse</a></div> 
     <div class="filmClip_list canyonBaby"><a href="composer.php?clip=canyonBaby#mediaplayer">Lady Sedona Vortex</a></div> 
     <div class="filmClip_list celestialGuides"><a href="composer.php?clip=celestialGuides#mediaplayer">Celestial Guides</a></div> 
     <div class="filmClip_list springback"><a href="composer.php?clip=springback#mediaplayer">Springbank Park/Lawson Road</a></div> 
     <div class="filmClip_list hallelujas"><a href="composer.php?clip=hallelujas#mediaplayer">Hallelujahs</a></div> 
     <div class="filmClip_list myOnly"><a href="composer.php?clip=myOnly#mediaplayer">My Only</a></div> 
     <div class="filmClip_list selfDefense"><a href="composer.php?clip=selfDefense#mediaplayer">Self Defense</a></div> 
     <div class="filmClip_list orchestral"><a href="composer.php?clip=orchestral#mediaplayer">The Return of the Chevalier <i>(orchestral)</i></a></div> 
    </div><!-- end #clip_nav--> 

    <!-- Slideshow --> 
    <div id="image_holder"> 
     <img class="song_image" src="../audio/filmClip_<?php echo $song ?>_<?php echo $initialSlide ?>.jpg" width="600" height="400" alt="Slideshow" /> 
    </div><!-- end #image_holder--> 

    <!-- Audio --> 
    <div id="audio_player"> 
     <audio controls="controls" preload="auto" <?php echo $autoplay ?>> 
     <source src="../audio/filmClip_<?php echo $song ?>.ogg" type="audio/ogg" /> 
     <source src="../audio/filmClip_<?php echo $song ?>.mp3" type="audio/mpeg" /> 
     &nbsp;&nbsp;Your browser does not support audio. Please upgrade your internet browser to the latest version <a href="http://www.onguardonline.gov/upgrade.aspx">here</a>. 
     </audio> 
    </div><!-- end #audio_player --> 
    </div><!-- end #audio_clips --> 

Answer 1

正是這種規則style_2011.css：

body.composer audio { 
    height: 32px; 
    width: 100%; 
} 

特別是，如果你設置高度爲45px或更多，則會出現控件。

Answer 2

只需刪除音頻標籤的高度即可。