html – 当td为position：relative时,表格边框未正确呈现

2023年8月9日 263次阅读

当满足以下条件时,我遇到表格边框问题并不总是正确呈现：

>该表包含在具有overflow-y：scroll的div中
>桌子上的边界倒塌了
>元素的样式位置：相对

据我所知,这只发生在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>

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

《html – 当td为position：relative时,表格边框未正确呈现》

这里表的底部行和位的边框无法呈现,但表内容将显示是否有任何内容.问题的存在和严重程度取决于Chrome窗口的大小,这让我觉得这是浏览器中的错误.

我的问题是：代码中是否有任何东西看起来像是在滥用浏览器？任何可能完成相同任务的调整(位置：调整大小调整手柄的位置是相对的),而不会让Chrome生气？或者这只是一个明确的浏览器错误？

编辑：我认为这不是“表格边框消失与位置：相对”问题,讨论here, for example.表格单元格的边框通常是部分渲染的,如果(例如)y方向滚动被删除,问题就会消失.

最佳答案 我复制了这个问题.每个浏览器的渲染都不同.它可能是一个浏览器错误.

要使其在所有浏览器中完美运行的简单解决方法是添加< div>在每个td里面,用position：relative来设置它们的样式.如果你想让div与td具有相同的高度,那么也给它们高度：100％.

这是一个demo.

Off-Topic Note(与问题原因相关的那种)：

当您将padp 10px赋予宽度为300px的元素时,实际宽度将变为320px.如果你给它边框1px,实际宽度将是322px(边框左边1px和边框右边1px).要使用填充10px和边框1px获得实际的300px,请为元素赋予此属性：box-sizing：border-box;.同样的概念适用于“高度”.

例如,当您给出元素高度为39px且边框为1px时,实际高度为41px(1px顶部边框1px底部边框).如果你将box-sizing：border-box添加到td,那么高度将是39px.

点赞