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

2023年11月3日 245次阅读

我有一个简单的动态边框似乎在IE和Firefox中工作正常,但在Chrome中它有时似乎有一个奇怪的双厚边框.我看不出CSS的任何差异,我似乎无法磨练究竟是什么导致特定边框变得双倍厚,但我设法创建了一个演示该问题的CodePen.不知道这是Chrome的这个问题还是我的CSS做错了？

在笔中,如果你按照指示那么你应该在顶部得到一个双厚边框的单元格,如下所示：

《css – 表格中的粗动态边框会导致Chrome出现视觉故障？》

CodePen

    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.

最佳答案 我不得不在客户端宽度周围玩一下,看看你在描述什么,但是,它发生了.由于CSS,Chrome必须在运行时重新调整行大小,并且可能没有注意到由于增加的厚度需要进行所有尺寸调整后需要对单元格进行完全重新绘制.我模糊地回忆起曾经注意到Chrome中一个类似奇怪的问题,Chrome没有意识到需要在一个新的位置重新绘制我的某些表格单元格的背景,之后桌面上的一些CSS更改推下了单元格.

请注意,如果您在DevTools中关闭并返回一些不直接相关的CSS语句(如TH vertical-align),则触发的重绘会纠正视觉故障,因此我认为它有资格作为Chrome错误 – 无论最终渲染chrome在这种切换之后应该是它开始做的事情.

一般来说,通过改变边框来对行大小进行这样的调整可能并不理想,但考虑到表的样式选项,我可以看到你可能有很多好的选择. (真正理想的是,如果有轮廓顶部,轮廓底部等,以及表格的轮廓折叠,那么可以扩展this以添加影响任意单元格边界的非位置影响轮廓.)

您可能会做一些事情来缓解故障：

>将行高设置为一些额外的东西,比如td,{height：35px}似乎在我对Chrome中的示例测试中解决了这个问题.我不知道为什么,因为单元格垂直定位在点击时仍然有所改变.我想某种程度上Chrome会得到一些提示来重新粉刷.
>将表设置为border-collapse：单独.我知道,不理想.
>将每个单元格内容包裹在您设计样式的内部div中.这也遭遇边界崩溃的一些缺点：分开,即蓝色轮廓被规则线分解,并且在连续选择的线上加倍轮廓.

点赞