小编Mel*_*ens的帖子

表格中的粗动态边框会导致 Chrome 中的视觉故障?

我有一个简单的动态边框,它在 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)

css google-chrome

5
推荐指数
1
解决办法
902
查看次数

标签 统计

css ×1

google-chrome ×1