为什么 JavaScript 样式适用于除 Internet Explorer 之外的所有浏览器？答案

【问题标题】：Why is JavaScript styling working with all browsers except Internet Explorer?为什么 JavaScript 样式适用于除 Internet Explorer 之外的所有浏览器？
【发布时间】：2013-09-16 12:04:53
【问题描述】：

我正在使用视频 JS HTML5 播放器播放一些视频，我想在视频播放器下方添加章节的可视化表示。

我基本上是从数据库中获取有多少章节，然后使用 PHP 创建该数量的 div。

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

因此，章节分隔符标题 div 将被设置为章节的实际大小，并且章节分隔符只是一条线，1% 厚以分割章节。

然后我使用 JavaScript onload 函数来设置这些 div 的样式。

 /* -----------------------------------------------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] ?>"; 
    }

所以它应该是这样的：

问题在于这适用于除 Internet Explorer 之外的所有浏览器。
就好像 div 根本没有设置它们的宽度样式。

所以它看起来像这样：

如果有人可以看到或解释为什么这可能不起作用，那将非常有帮助

.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 输出：

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>

div 的输出对我来说似乎都很好，但 javascript 并没有设置 chapter-breaker-title div 的宽度

【问题讨论】：

我认为这是比 JS 更多的 CSS 问题。发布 CSS。
哪个版本的IE？版本 8 不支持 HTML5。
@duffymo im 使用视频 js 它有 ie 8 的后备。
@ivanIvanic 好的，我会发布 css 给我一分钟
离题：请注意 PHP 的 mysql_xxx() 函数已被弃用和过时。请考虑切换到 PHP 提供的较新的数据库 API 之一（PDO 或 mysqli）。但是，就这个问题而言，PHP 代码可能无关紧要；最好显示浏览器所看到的实际 HTML。

标签： javascript php css internet-explorer html5-video

【解决方案1】：

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

【讨论】：