我有一个简单的动态边框,它在 IE 和 Firefox 中似乎可以正常工作,但在 Chrome 中,它有时似乎会出现奇怪的双粗边框。我看不出 CSS 有什么不同,我似乎无法弄清楚究竟是什么导致了该特定边框加倍厚,但我设法创建了一个 CodePen 来演示该问题。知道这是 Chrome 的问题还是我的 CSS 有问题?
在笔中,如果您按照说明进行操作,那么您应该得到一个顶部带有双粗边框的单元格,如下所示:
angular.module("myApp", []);
(function() {
"use strict";
angular.module("myApp").controller("demoController", demoController);
demoController.$inject = ["$scope"];
function demoController($scope) {
$scope.model = {selected: []};
$scope.select = function(id) {
$scope.model.selected[id] = !$scope.model.selected[id];
};
}
})();Run Code Online (Sandbox Code Playgroud)
tr.border-selected > td:not(:first-child) {
border-top-color: #4182c2;
border-top-width: thick;
border-bottom-color: #4182c2;
border-bottom-width: thick;
}
tr.border-selected > td:nth-child(2) {
border-left-color: #4182c2;
border-left-width: thick;
}
tr.border-selected > td:last-child {
border-right-color: #4182c2;
border-right-width: thick;
}
th { …Run Code Online (Sandbox Code Playgroud)