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

Question

我有一个简单的动态边框，它在 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];
    };
  }
})();

  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 {
  text-align: center;
}

<div ng-app="myApp">
  <div ng-controller="demoController">
    <h2 class="page-header">Chrome border glitch</h2>
      <div class="bs-callout bs-callout-info">
        <h4>Overview</h4>
        <p>Adjust the bottom frame until it has a vertical scrollbar and then click on 1009 and you'll see how chrome seems to bungle the borders in the "Opened by" column. If another row is then selected (by clicking on it) then it seems to work correctly.</p>
      </div>
    <div>
      <table class="table table-condensed table-bordered table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>Theme</th>
            <th>Opened by</th>
            <th>Updated</th>
          </tr>
        </thead>
        <tr ng-class="{'border-selected': model.selected[1010] === true}">
          <td ng-click="select(1010)">
            1010
          </td>
          <td ng-click="select(1010)">
            404 of "paper.html" and "header.html" when rendering ng-table
          </td>
          <td ng-click="select(1010)">
            329530588
          </td>
          <td ng-click="select(1010)">
            Jul 13, 2017 2:47:23 AM
          </td>
        </tr>
        <tr ng-class="{'border-selected': model.selected[1009] === true}">
          <td ng-click="select(1009)">
            1009
          </td>
          <td ng-click="select(1009)">
            ReferenceError: NgTableParams is not defined
          </td>
          <td ng-click="select(1009)">
            weiwanying
          </td>
          <td ng-click="select(1009)">
            Jul 12, 2017 9:48:30 PM
          </td>
        </tr>
        <tr ng-class="{'border-selected': model.selected[1008] === true}">
          <td ng-click="select(1008)">
            1008
          </td>
          <td ng-click="select(1008)">
            ng-table fixed header and scroll not working
          </td>
          <td ng-click="select(1008)">
            Ramlanka7
          </td>
          <td ng-click="select(1008)">
            Jul 11, 2017 11:05:27 AM
          </td>
        </tr>
        <tr ng-class="{'border-selected': model.selected[1007] === true}">
          <td ng-click="select(1007)">
            1007
          </td>
          <td ng-click="select(1007)">
            Accessibillity and wcag violation: filter input field form element don't have any label
          </td>
          <td ng-click="select(1007)">
            QuBaR
          </td>
          <td ng-click="select(1007)">
            Jul 7, 2017 2:47:13 AM
          </td>
        </tr>
        <tr ng-class="{'border-selected': model.selected[1006] === true}">
          <td ng-click="select(1006)">
            1006
          </td>
          <td ng-click="select(1006)">
            does not reload filter data in NgTableParams
          </td>
          <td ng-click="select(1006)">
            gaurav2086
          </td>
          <td ng-click="select(1006)">
            Jul 11, 2017 8:09:03 AM
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

编辑：ng-table从笔中删除部分以简化 JavaScript。

Answer 1

我不得不稍微调整一下客户端宽度才能看到你所描述的内容，但是，是的，它发生了。由于 CSS，Chrome 必须动态重新调整行大小，并且可能没有注意到在由于增加的厚度而需要进行所有大小调整之后，它需要完全重新绘制单元格。我依稀记得曾经在 Chrome 中注意到一个类似的奇怪问题，即在表格上方的一些 CSS 更改按下单元格之后，Chrome 没有意识到它需要在新位置重新绘制我的一些表格单元格的背景。

请注意，如果您在 DevTools 中打开和关闭一些不太直接相关的 CSS 语句（例如 TH 垂直对齐），则触发的重绘会纠正视觉故障，因此我认为它符合 Chrome 错误 - 无论最终渲染什么在这样的切换之后所做的事情应该是它开始时所做的事情。

一般来说，通过更改边框对行大小进行这样的调整可能并不理想，但我可以看到，考虑到表格的样式选项，您可能有很多好的选择。（真正理想的是如果有顶部轮廓、底部轮廓等以及表格的轮廓折叠，这样就可以扩展以添加不影响位置的轮廓，从而遮盖任意单元格边框。）

您可以采取一些措施来减轻故障：

1. 将行高设置为一些额外的值，例如 td,th{height:35px} 似乎可以在我在 Chrome 中测试您的示例时解决这个问题。我不知道为什么，因为单元格垂直定位仍然在点击时发生变化。我想 Chrome 会以某种方式得到一些提示来进行更多的重新绘制。
2. 将表格设置为 border-collapse:separate。我知道，这并不理想。
3. 将每个单元格内容包裹在一个内部 div 中，其边框由您设置。这也受到 border-collapse:separate 的一些缺点的影响，即蓝色轮廓被常规线打破，并且连续选定的线上的轮廓加倍。