html - 当 td 位于位置 :relative 时，表格边框未正确呈现

Question

当满足以下条件时，我遇到了表格边框无法始终正确呈现的问题:

• 表格包含在带有 overflow-y:scroll
的 div 中
• 边框在 table 上折叠
• 元素的样式为 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 窗口的大小，这让我认为这是浏览器中的错误。

我的问题是:代码中是否有任何内容看起来像是我明显在滥用浏览器？任何可能完成相同任务的调整(position:relative 是放置调整大小 handle 所必需的)而不会让 Chrome 生气？或者这只是一个明显的浏览器错误？

编辑:我相信这不是讨论的“表格边框随位置消失:相对”问题here, for example .表格单元格的边框通常会部分呈现，如果(例如)移除 y 方向的滚动，问题就会消失。

Answer 1

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

让它在所有浏览器中完美运行的一个简单解决方法是添加 <div>每个内部 td并用 position: relative 设置样式.如果你想要 div采取与 td 相同的高度, 然后也给他们 height: 100% .

这是一个 demo .

题外话(与问题原因相关):

当您为宽度为 300px 的元素提供 10px 的 padding 时，实际宽度变为 320px。如果你给它边框 1px，实际宽度将是 322px(左边框 1px 和右边框 1px)。要获得填充 10 像素和边框 1 像素的实际 300 像素，请为元素提供以下属性:box-sizing: border-box; .同样的概念适用于“高度”。

例如，当您给元素高度 39px 和边框 1px 时，实际高度为 41px(1px 顶部边框 + 1px 底部边框)。如果添加 box-sizing: border-box到 td , 那么高度就是 39px。