Css 表格中较厚的动态边框是否会导致Chrome出现视觉问题？

我有一个简单的动态边框，它在IE和Firefox中似乎工作得很好，但在Chrome中，它有时似乎有一个奇怪的双层厚边框。我看不出CSS有什么不同，我似乎也不知道到底是什么导致了这个特殊的边界变得双层厚，但我已经成功地创建了一个代码笔来演示这个问题。你知道这是Chrome的问题还是我的CSS有问题吗

在笔中，如果您按照指示操作，则应该得到一个顶部有两层厚边框的单元格，如下所示：

angular.module（“myApp”，[]）；
（功能（）{
“严格使用”；
角度。模块（“myApp”）。控制器（“demoController”，demoController）；
demoController.$inject=[“$scope”]；
功能控制器（$scope）{
$scope.model={selected:[]}；
$scope.select=函数（id）{
$scope.model.selected[id]=！$scope.model.selected[id]；
};
}
})();
tr.border-selected>td:not（：第一个孩子）{
边框顶部颜色：#4182c2；
边框顶宽：厚；
边框底色：#4182c2；
边框底宽：厚；
}
tr.border-selected>td:n第n个子项（2）{
左边框颜色：#4182c2；
边框左宽度：粗；
}
tr.border-selected>td：最后一个子项{
右边框颜色：#4182c2；
边框右宽度：粗；
}
th{
文本对齐：居中；
}

铬边毛刺
概述
调整底部框架，直到它有一个垂直的滚动条，然后点击1009，你会看到chrome在“Opened by”列中的边框看起来有多糟糕。如果选择了另一行（通过单击它），那么它似乎工作正常

#
主题
开
更新
1010
渲染ng表时，404的“paper.html”和“header.html”
329530588
2017年7月13日凌晨2:47:23
1009
ReferenceError:未定义NgTableParams
魏万英
2017年7月12日晚上9:48:30
1008
ng表格固定标题和滚动条不工作
拉姆兰卡7
2017年7月11日上午11:05:27
1007
可访问性和wcag冲突：筛选器输入字段表单元素没有任何标签
曲巴尔
2017年7月7日凌晨2:47:13
1006
不在NgTableParams中重新加载筛选器数据
戈拉夫2086
2017年7月11日上午8:09:03
我不得不绕着客户端的宽度转一圈，看看你在描述什么，但是，是的，它确实发生了。由于CSS的原因，Chrome不得不动态地重新调整行大小，并且可能没有注意到在由于增加的厚度而进行了所有大小调整之后，它需要对单元格进行完全重新绘制。我隐约记得有一次在Chrome中注意到一个类似的奇怪问题，Chrome没有意识到需要在一个新的位置重新绘制我的一些表格单元格的背景，在表格上方的CSS更改将单元格向下推后

请注意，如果在DevTools中打开或关闭一些不太直接相关的CSS语句（如TH vertical align），则触发的重新绘制会纠正视觉故障，因此我认为这是一个Chrome错误——无论Chrome在这种切换后最终做什么，都应该是它开始做的

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

您可能会采取一些措施来缓解此问题：

将行高度设置为一些额外的值，比如td，th{height:35px}似乎可以在我测试您的Chrome示例时解决这个问题。我不知道为什么，因为点击后单元格的垂直位置仍在改变。我想Chrome得到了一些线索，需要做更多的重新粉刷
将表格设置为边框折叠：分隔。不太理想，我知道
将每个单元格内容包装在一个内部div中，并对其边框进行样式设置。这也会受到边界崩溃的一些负面影响：分离，即蓝色轮廓被规则线分割，以及在连续选择的线上加倍轮廓
谢谢你的评论-我最后在select函数中做了一些“重新绘制”的操作：
$timeout（function（）{$（'.border selected'）.hide（）.show（0）；}，0）它当然不理想，但确实有效。