当绝对 <div> 嵌套在其中时，相对 <th> 失去边框

Question

我有一个带 DIV 孩子的 TH 父母。

TH 必须是 position:relative 以便其子 DIV 可以与 position:absolute 对齐。

但是，当我将 position:relative 添加到 TH 时，它会完全失去其边框属性。

无论是否存在 TH 文本内容、DIV、A 或 SVG，都会发生这种情况（请参阅标记）。

我想知道如何阻止这种奇怪的行为！谢谢你。

Codepen

$(function() {
  $(".table-body").scroll(function() {
    $(".table-header")[0].style.top = (this.scrollTop) + 'px';
  });
});

body {
  font-family: 'Open Sans', sans-serif;
}

* {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
}

th,
tr,
td,
thead,
tbody {
  text-align: left;
  margin: 0 !important;
}

th,
td {
  padding: 16px 24px 16px 24px;
}

th a {
  position: relative;
  width: 24px;
  cursor: pointer;
  float: right;
  text-align: right;
}

svg * {
  transition: fill .2s ease;
}

.filters-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: red;
  height: 100px;
  width: 40px;
}

th a:hover>svg * {
  fill: #333333;
}

thead tr {
  height: 36px;
}

#bodytable tbody {
  display: block;
}

.table-header {
  position: relative;
  display: block;
}

.table-body {
  border: 1px solid #ccc;
  overflow: auto;
  height: 400px;
}

.header-cell {
  position: relative;
  background-color: #f8f8f8;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  min-width: 330px;
}

.body-cell {
  min-width: 330px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-body">
  <table id="bodytable">
    <thead class="table-header">
      <tr>
        <th class="header-cell col1">One
          <a>
            <svg x="0px" y="0px" width="4px" height="20px" viewBox="0 0 4 20" enable-background="new 0 0 4 20" xml:space="preserve">
								<circle fill="#666666" cx="2" cy="2" r="2"/>
								<circle fill="#666666" cx="2" cy="10" r="2"/>
								<circle fill="#666666" cx="2" cy="18" r="2"/>
							</svg>
          </a>
          <div class="filters-menu"></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="body-cell col1">body row1</td>
      </tr>
    </tbody>
  </table>
</div>

此脚本使表格的标题元素垂直固定，但在其主体元素旁边水平滚动。

Answer 1

好的，所以我发现这是 Firefox 中的一个错误，其中 TH 的背景在相对定位时会覆盖边框。应该搜索一下，抱歉模组。

通过在 .header-cell 类上使用透明的 rgba() 背景属性确认

有关更多信息，请参阅此堆栈问题：

Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell

用户Boris Zbarsky提交的这个错误：

https://bugzilla.mozilla.org/show_bug.cgi?id=688556

遗憾的是 6 年多后它仍然坏了！

目前，将 background-color 属性赋予 THEAD 父元素似乎是一个很好的解决方法

Answer 2

对于 Firefox，您可以使用 gradient 和 background-size 作为解决方法：

  background-color:#f8f8f8;/* older browser */
  background:linear-gradient(#f8f8f8,#f8f8f8 )no-repeat center / 100% 100% ;/* firefox understands this */

$(function() {
  $(".table-body").scroll(function() {
    $(".table-header")[0].style.top = (this.scrollTop) + 'px';
  });
});

body {
  font-family: 'Open Sans', sans-serif;
}

* {
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
}

th,
tr,
td,
thead,
tbody {
  text-align: left;
  margin: 0 !important;
}

th,
td {
  padding: 16px 24px 16px 24px;
}

th a {
  position: relative;
  width: 24px;
  cursor: pointer;
  float: right;
  text-align: right;
}

svg * {
  transition: fill .2s ease;
}

.filters-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: red;
  height: 100px;
  width: 40px;
}

th a:hover>svg * {
  fill: #333333;
}

thead tr {
  height: 36px;
}

#bodytable tbody {
  display: block;
}

.table-header {
  position: relative;
  display: block;
}

.table-body {
  border: 1px solid #ccc;
  overflow: auto;
  height: 400px;
}

.header-cell {
  background-color:#f8f8f8;/* older browser */
  background:linear-gradient(#f8f8f8,#f8f8f8 )no-repeat center / 100% 100% ;/* firefox understands this */
  position: relative;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  min-width: 330px;
}

.body-cell {
  min-width: 330px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-body">
  <table id="bodytable">
    <thead class="table-header">
      <tr>
        <th class="header-cell col1">One
          <a>
            <svg x="0px" y="0px" width="4px" height="20px" viewBox="0 0 4 20" enable-background="new 0 0 4 20" xml:space="preserve">
								<circle fill="#666666" cx="2" cy="2" r="2"/>
								<circle fill="#666666" cx="2" cy="10" r="2"/>
								<circle fill="#666666" cx="2" cy="18" r="2"/>
							</svg>
          </a>
          <div class="filters-menu"></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="body-cell col1">body row1</td>
      </tr>
    </tbody>
  </table>
</div>