CSS - 仅在chrome中表格单元格边框的奇怪行为

Question

我有一个简单的css表。当我向中间行添加底部边框时，下一行有一个非常奇怪的边框。它只发生在chrome中，我不明白为什么。

我应该说我使用javascript将底部边框应用到中间行（因为我事先不知道表的大小）。我试着在没有javascript的情况下申请，而且没有奇怪的问题。

这是表格的一个例子，注意中间的边框： http://ri-cloud.appspot.com/super_tacticko?create

这是我用来创建中间线的javascipt：

// add the middle line
var half = height / 2; // it has to be zugi anyway
var $middle = $('tr').slice(half-1, half);
$middle.find('td').addClass('middle-td');

Answer 1

如果调整窗口大小可以解决问题（就像我的情况一样），很可能是渲染错误...... Chrome中有很多这样的问题不时出现，主要是因为它试图加快速度比其他一切都是偷工减料（imo）。

解决错误的唯一方法是继续尝试不同的方法，直到找到一个不会触发问题的方法，或者尝试以编程方式调整表格/正文的大小，然后将其放回到再次正确的大小 - 这可能会迫使Chrome正确重绘...并且应该足够快地发生，用户不会注意到。第三种方法可以是完全用JavaScript构建表，一旦正确形成，就将其嵌入到页面中。

CSS方法可能起作用的原因是因为它将在渲染过程中的不同点使用Chrome的渲染方法，而不是JavaScript样式修改。

基本上，我看过Chrome做了一些非常奇怪的事情。我过去用来解决奇怪的Chrome问题的黑客攻击是：

1. 在维度计算中使用小数 - 即30.1px而不是30px
2. 未将不透明度设置为完整 - 即0.99而不是1.0
3. 设置Cookie时不使用前缀为.的IP地址
4. 在某些情况下使用overflow: hidden修复奇怪的渲染。


哦，仅仅是因为我在Windows 7上通过Chrome v25.0.1364.97查看的记录

Answer 2

我在 Windows 10 上的 Chrome 中遇到了类似的问题。这个问题的原因是 Chrome 无法正常使用 Windows 文本大小设置功能（恕我直言，在 Win OS 中更改 DPI）。当我从 125% 文本大小切换到 100% 文本大小时，Chrome 正确呈现了我的 HTML 表格。据我测试，其他浏览器都可以使用此功能。

Answer 3

最后我对这个问题做了如下快速修复：

table {
  tr td {
    border-color: transparent !important;
    outline: 1px solid #666;
  }
}

它不是防弹的，边框的大小是 2px，但总比没有好。