Question

我有一个简单的HTML5 <progress>标记：

<progress max="100" value="80"></progress>

栏显示但全部为灰色，没有完成状态（即80％的栏不是蓝色）。

当我转到任何其他讨论如何使用<progress>标记的页面时，完成状态显示完全正常。就在我把它粘在我的页面上时，它无法正确呈现。

我正在使用 AngularJS 和 Bootstrap 。我不确定这是否可能造成一些麻烦？

为什么我的<progress>标记无法正确呈现进度？

更新（附加代码）

由于使用 AngularJS ，周围的代码比普通代码更复杂，但是我们在这里......

AngularJS 根文件是：

<!doctype html>
<html>
<head>
  <!-- Style Includes -->
</head>

<body ng-App="myApp">

<!-- AngularUI-Router View -->
<ui-view></ui-view>

<!-- JavaScript Includes -->

</body>
</html>

我的AngularUI-Router将以下视图加载到有问题页面的ui-view标记中：

<div class="container">
  <div class="row">
    <div class="col-md-3 well well-sm">
      <ul class="list-group">
        <a ui-sref="admin.groups.create" class="list-group-item" ng-class="{ active: isTab('admin.groups.create') }">Create Group Visit <span class="pull-right"><i class="fa fa-plus-circle"></i></span></a>
        <a ui-sref="admin.groups.list" class="list-group-item" ng-class="{ active: isTab('admin.groups.list') }">List All Group Visits <span class="badge">[[ allGroups.length ]]</span></a>
      </ul>
      <h4>Upcoming Group Visits</h4>
      <ul class="list-group">
      </ul>
      <h4>Recent Group Visits</h4>
    </div>
    <div class="col-md-9">
        <ui-view></ui-view>
    </div>
  </div>
</div>

最后，第三个视图放入上面代码块的ui-view，显示progress栏。

<p>Create the group!!</p>

<progress max="100" value="80"></progress>

所以，我确实有<!doctype html>但是有几层 AngularUI-Router 视图导致进度条。似乎他们以某种方式打破了它，但我不确定是否有某些东西可以说服它在这种情况下工作。

HTML5进度标记未显示完成状态

0 个答案: