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