当 td 为position:relative 时，表格边框未正确呈现

Question

当满足以下条件时，我遇到表格边框并不总是正确渲染的问题：

• 该表包含在一个 div 中overflow-y:scroll
• 桌子上的边框折叠起来
• 元素有样式position:relative

据我所知，这种情况仅发生在 Chrome 上（Mac OS 10.11.6 上的版本 54.0.2840.98）。我在 Safari 和 Firefox 上测试过，没有任何问题。

我在 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>

出现问题时页面如下所示：

这里，表格底部行和一点的边框无法呈现，尽管表格内容会显示（如果有的话）。问题的存在和严重性取决于 Chrome 窗口的大小，这让我认为这是浏览器中的一个错误。

我的问题是：代码中是否有任何内容看起来像是我明显在滥用浏览器？是否有任何调整可以完成相同的任务（放置调整大小手柄需要位置：相对）而不会让 Chrome 生气？或者这只是一个明显的浏览器错误？

编辑：我相信这不是这里讨论的“表格边框随位置消失：相对”问题。表格单元格的边框通常会部分呈现，并且如果（例如）移除 y 方向上的滚动，问题就会消失。

Answer 1

我复制了这个问题。每个浏览器的渲染效果都不同。这可能是浏览器错误。

让它在所有浏览器中完美工作的一个简单解决方法是<div>在每个td浏览器中添加并使用position: relative. 如果您希望 与div具有相同的高度td，那么也给它们height: 100%。

这是一个演示。

题外话（与问题原因相关）：

当您为宽度为 300px 的元素赋予内边距 10px 时，实际宽度将变为 320px。如果你给它边框 1px，实际宽度将是 322px（左边框 1px，右边框 1px）。要获得实际的 300px、内边距 10px、边框 1px，请为元素指定以下属性：box-sizing: border-box;。同样的概念适用于“高度”。

例如，当您给元素高度为 39px，边框为 1px 时，实际高度为 41px（1px 顶部边框 + 1px 底部边框）。如果添加box-sizing: border-box到td，则高度将为 39px。