谁能解释为什么这些元素符号会在 Firefox 和 IE 中正确改变颜色，但在 Chrome 中却不能(我当前的版本是 47.0.2526.106)？为什么第一个 ul 中的元素符号保持白色，而其他元素符号一开始就变了？
请注意，无论我绑定(bind)到 class 还是使用 ng-class 属性，我都会得到相同的行为。
有没有办法让颜色正确更新？
火狐/IE:
Chrome :
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];
}
}
$interval(updateItems, 3000);
}
]);body {
background: #333;
color: white;
}
ul {
display: inline-block;
}
.good {
color: limegreen;
}
.warning {
color: yellow;
}
.danger {
color: red;
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li ng-class="{'good': item.class==='good', 'warning': item.class==='warning', 'danger': item.class==='danger'}" ng-repeat="item in items">{{item.value}}</li>
</ul>
</body>
</html>
大约一年后回到这个问题上，Google 似乎已经修复了导致此问题的渲染错误，但我不确定具体是哪个版本包含此修复程序。我在 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;
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li ng-class="{'good': item.class==='good', 'warning': item.class==='warning', 'danger': item.class==='danger'}" ng-repeat="item in items">{{item.value}}</li>
</ul>
</body>
</html>
另一种选择是触发 repaint event为了强制浏览器更新样式。这绝对是一个 hackish 选项，但它仍然有效:
function forceRepaint() {
document.body.style.display = 'none';
document.body.offsetHeight;
document.body.style.display = '';
}
这是另一个更新的例子:
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];
forceRepaint();
}
}
$scope.getItemValue = function(item) {
return item.value;
};
$interval(updateItems, 3000);
}
]);
function forceRepaint() {
document.body.style.display = 'none';
document.body.offsetHeight;
document.body.style.display = '';
}body {
background: #333;
color: white;
}
ul {
display: inline-block;
}
.good {
color: limegreen;
}
.warning {
color: yellow;
}
.danger {
color: red;
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li ng-class="{'good': item.class==='good', 'warning': item.class==='warning', 'danger': item.class==='danger'}" ng-repeat="item in items">{{item.value}}</li>
</ul>
</body>
</html>
关于javascript - 当 Angular 更改时，元素符号颜色无法在 Chrome 中正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34501539/
如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？ 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
我正在尝试在我的centos服务器上安装therubyracer，但遇到了麻烦。$geminstalltherubyracerBuildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingtherubyracer:ERROR:Failedtobuildgemnativeextension./usr/local/rvm/rubies/ruby-1.9.3-p125/bin/rubyextconf.rbcheckingformain()in-lpthread...yescheckingforv8.h...no***e
我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择