当Angular更改时,子弹颜色在Chrome中无法正确显示

大约一年后回到这一点,似乎谷歌已经修复了造成这种情况的渲染错误,尽管我不确定哪个版本包含了修复程序.我在Chrome v56.0.2924.87上不再看到此问题.

这是Chrome渲染错误.

一种选择是使用伪元素插入自定义项目符号点.

ul {
  display: inline-block;
  list-style: none;
}
ul li:before {
  content: '\2022';
  text-indent: -1em;
  display: inline-block;
}

这是更新的示例:

angular.module('myApp', [])
  .controller('myCtrl', [
    '$scope',
    '$interval',
    function($scope, $interval) {
      var values = ['Hello', 'Oops', 'Uh-Oh...'];
      var classes = ['good', 'warning', 'danger'];
      var nItems = 8;
      $scope.items = [];

      for (var i = 0; i < nItems; i++) {
        $scope.items.push({});
      }

      function updateItems() {
        for (var i = 0; i < $scope.items.length; i++) {
          var item = $scope.items[i];
          var chosen = Math.floor(Math.random() * values.length);
          item.value = values[chosen];
          item.class = classes[chosen];
        }
      }

      $scope.getItemValue = function(item) {
        return item.value;
      };

      $interval(updateItems, 3000);
    }
  ]);

body {
  background: #333;
  color: white;
}
ul {
  display: inline-block;
  list-style: none;
}
ul li:before {
  content: '\2022';
  text-indent: -1em;
  display: inline-block;
}
.good {
  color: limegreen;
}
.warning {
  color: yellow;
}
.danger {
  color: red;
}

  
  
  



  

    
{{item.value}}
  

  

    
{{item.value}}
  

  

    
{{item.value}}