1

我有一个简单的 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视图通向进度条。似乎他们以某种方式破坏了它，但不确定是否有什么东西可以说服它在这种情况下工作。

4

0 回答 0