当td为相对位置时，表边框没有正确呈现

I'm having problems with table borders not always rendering correctly when the following conditions are met:

当满足以下条件时，我的表边框出现了问题:

The table is contained within a div with overflow-y:scroll
该表包含在一个具有overflowy:scroll的div中
Borders are collapsed on the table
边界在桌子上倒塌了。
elements are styled position:relative
元素风格的位置:相对的

As near as I can tell, this is occurring only on Chrome (Version 54.0.2840.98 on Mac OS 10.11.6). I've tested on Safari and Firefox with no issues.

据我所知，这只出现在Chrome上(Mac OS 10.11.6版本为54.0.2840.98)。我在Safari和Firefox上测试过，没有问题。

I've managed a minimal case in JSFiddle (https://jsfiddle.net/5a0a4sL1/24/). The code looks like this:

我在JSFiddle管理了一个最小的案例(https://jsfiddle.net/5a0a4sL1/24/)。代码是这样的:

.scroll {
  background-color:white;
  overflow-y: scroll; 
  width: 300px; 
  height: 200px;
}
.wrapper {
  height: auto; 
  width: 280px; 
  padding: 10px; 
  margin: 0px;
}
table {
  width:90%; 
  margin:0px 5%; 
  border-collapse:collapse;
}
td {
  position:relative;
  border:1px solid black;
}

<div class="scroll">
  <div class="wrapper">
    <table>
      <tbody>
        <tr><td style="height:39px;"></td></tr>
        <tr><td style="height:75px;"></td></tr>
        <tr><td style="height:111px;"></td></tr>
        <tr><td style="height:39px;"></td></tr>
      </tbody>
    </table>
  </div>
</div>

The page looks like this when there's an issue:

当出现问题时，页面看起来是这样的:

Here the borders for the bottom row-and-a-bit of the table are failing to render, though table contents would show if there were any. The presence and severity of the issue depend on the size of the Chrome window, which make me think this is a bug in the browser.

在这里，表的底部行和位的边框没有呈现，但是表的内容会显示是否有。问题的存在和严重程度取决于Chrome窗口的大小，这让我认为这是浏览器中的一个bug。

My question is this: Is there anything in the code that looks like I'm obviously abusing the browser? Any tweaks that might accomplish the same task (the position:relative is required for the placement of resizing handles) without making Chrome angry? Or is this just a clear browser bug?

我的问题是:代码中是否有明显的我在滥用浏览器?任何可能完成相同任务的调整(位置:调整手柄的位置是必需的)，而不会让Chrome生气?或者这仅仅是一个浏览器漏洞?

Edit: I believe this isn't the "table borders disappear with position:relative" issue discussed here, for example. Borders for table cells are often partially rendered, and the issue disappears if (for example) scrolling in the y direction is removed.

编辑:我认为这不是这里讨论的“表边界随位置:相对”而消失的问题。表单元格的边框通常是部分呈现的，如果(例如)在y方向上滚动被删除，问题就会消失。

1 个解决方案

#1

I replicated the problem. The rendering is different in each browser. It could be a browser bug.

我复制问题。在每个浏览器中呈现是不同的。可能是浏览器的问题。

A simple workaround to get it to work perfectly in all browsers would be to add <div> inside each td and style them with position: relative. And if you want the div to take same height as the td, then also give them height: 100%.

要让它在所有浏览器中完美运行，一个简单的解决方案是在每个td中添加

，并使用position: relative(相对)对它们进行样式化。如果你想让div的高度和td一样，那么也要给它们的高度:100%。

Here's a demo.

这是一个演示。

Off-Topic Note (kind of relavant to the cause of the problem):

Off-Topic Note(类似于问题的原因):

When you give padding 10px to an element with width 300px, the actual width becomes 320px. And if you give it border 1px, the actual width will be 322px (border left 1px and border right 1px). To get an actual 300px with padding 10px and border 1px, give the element this attribute: box-sizing: border-box;. Same concept applies for "height".

当为宽度为300px的元素赋值10px时，实际的宽度变为320px。如果你给它边界为1px，那么它的实际宽度将是322px(边界为左1px，边界为右1px)。要得到一个实际的300px，填充10px和边框1px，给元素一个属性:box- size: border-box;同样的概念也适用于“身高”。

For example, when you gave an element height 39px and border 1px, the actual height is 41px (1px top border + 1px bottom border). If you add box-sizing: border-box to the td, then the height would be 39px.

例如，当您给出一个元素高度为39px和边界1px时，实际高度为41px (1px top border + 1px底部边框)。如果您在td中添加box尺寸:border-box，那么它的高度将是39px。

#1