为什么JavaScript样式可用于Internet Explorer以外的所有浏览器？

Question

I'm using video JS HTML5 player to play some videos and I want to add a visual representation of the chapters underneath the video player.

I'm basically grabbing how many chapters there are from the database and create that number of the divs with PHP.

 <div class="chapter-progress">
        <div class="chapter-breaker"></div>
        <? $tableName = 'sourceChapters';      
        $mysqlQuery = "SELECT * FROM " . $tableName . " WHERE recSourceId = "                          
       .$sourceVideo['recId']. " ORDER BY recOrdering ASC;";
        $sourceChapters = mysql_query($mysqlQuery); ?>
       <? $chapterBreakerNo = 0; ?>
       <? while($chapterBreakers = mysql_fetch_array($sourceChapters)){ ?>
          <div class="chapter-breaker-title" id="chapter-breaker-title<?=$chapterBreakerNo?>">    
          <p><?=$sourceChapters['recContent']?></p></div>
          <div class="chapter-breaker" id="chapter-breaker<?=$chapterBreakerNo?>"></div>
          <? $chapterBreakerNo++ ?>
          <? } ?>
          <div class="chapter-breaker-title" id="last-title"></div>
          <div class="chapter-breaker" style="float:right"</div>
  </div>

So there is chapter-breaker-title divs that are going to be styled to be the actual size of the chapters and there are chapter breaker which are just a line, 1% thick to split the chapters.

I then use a JavaScript onload function to style these divs.

 /* -----------------------------------------------function for styling the chapter progress bar ---------------------------------------*/

    function styleChapters(){
        //also run the chapter system on load
        chapterSys();
        // total video duration 
        var duration = myPlayer.duration();
        //find the time difference for the first chapter , this is just the chapter time 
        var timeDif = (<?=$chapterPlayOffsets[0]?>);
        // work out the percentage width for the div width
        var percentageMargin = ((timeDif/duration) * 100 -1);
        //get the first chapter breaker title and style the width 
        document.getElementById("chapter-breaker-title0").style.width = percentageMargin + "%";
        document.getElementById("chapter-breaker-title0").innerHTML="00";
       // for the rest of the chapters

       <? for($i=1;$i<count($chapterPlayOffsets);$i++) { ?>
        //total video duration
        var duration = myPlayer.duration();
        // find the difference between the chapter and the previous chapter
        var timeDif = (<?=$chapterPlayOffsets[$i]?>) - (<?=$chapterPlayOffsets[$i-1]?>);
        // get the percentage for div length minus 1% for the width of the chapter breakers
        var percentageMargin = ((timeDif/duration) * 100) -1;
        //style each of the divs width
        document.getElementById("chapter-breaker-title<?=$i?>").style.width = percentageMargin + "%";
                    //put the chapter title in 
        document.getElementById("chapter-breaker-title<?=$i?>").innerHTML="<?= $chapterTitles[$i-1] ?>";

      <? } ?>
      //put the last title in 
      <? $lastTitle = count($chapterPlayOffsets)-1 ?>
      document.getElementById("last-title").innerHTML="<?=$chapterTitles[$lastTitle] ?>"; 
    } 

So this is what it should look like:

The problem is that this works on all browsers apart from Internet Explorer.
It's as if the divs are not having their width styled at all.

So it looks like this:

If anyone can see or explain why this may not be working, it would be very helpful

.chapter-progress{
width:100%;
height:20px;
background: rgb(255,204,0)
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
-50% 0 repeat; 
margin:auto;
float:left; 
}

.chapter-breaker{
height:100%;
width:1%;
background-color: rgb(0, 51, 153);
    float:left;
}

.chapter-breaker-title{
    height:100%;
    float:left;
}

---

HTML output :

div class="chapter-progress">
<div class="chapter-breaker"></div>
<div class="chapter-breaker-title" id="chapter-breaker-title0">
    00
</div>
<div class="chapter-breaker" id="chapter-breaker0"></div>
<div class="chapter-breaker-title" id="chapter-breaker-title1">
    01
</div>
<div class="chapter-breaker" id="chapter-breaker1"></div>
<div class="chapter-breaker-title" id="chapter-breaker-title2">
    02
</div>
<div class="chapter-breaker" id="chapter-breaker2"></div>
<div class="chapter-breaker-title" id="chapter-breaker-title3">
    03
</div>
<div class="chapter-breaker" id="chapter-breaker3"></div>
<div class="chapter-breaker-title" id="chapter-breaker-title4">
    04
</div>
<div class="chapter-breaker" id="chapter-breaker4"></div>
<div class="chapter-breaker-title" id="last-title">
    05
</div>
<div class="chapter-breaker" style="float: right;">
</div>
</div>

The ouput of the divs all seem fine to me but the javascript has not styled the width of the chapter-breaker-title divs

Answer 1

以防万一有人遇到类似的问题，我不得不在我的JavaScript上放置时间延迟才能使其正常工作，因此在触发脚本时，必须在页面未完全加载之前。