css - 在 IE 11 中，伪元素后的标签无法正常工作

Question

table {
  border-top: 1px solid #000;
  border-collapse: collapse;
  width: 100%;
}

tr, th, td {
  border-bottom: 1px solid #000;
}

th {
  padding: 30px;
  position: relative;
  text-align: left;
  width: 30%;
}

th:after {
  background: #000;
  bottom: 30px;
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 30px;
  width: 1px;
}

td {
  padding: 30px;
  position: relative;
}

th + td:before {
  background: #000;
  bottom: 30px;
  content: '';
  display: block;
  position: absolute;
  left: -1px;
  top: 30px;
  width: 1px;
}

<table>
  <tr>
    <th>Line</th>
    <td>Line</td>
  </tr>
  <tr>
    <th>Line<br>Line<br>Line</th>
    <td>Line</td>
  </tr>
  <tr>
    <th>Line</th>
    <td>Line<br>Line<br>Line</td>
  </tr>
  <!-- new problem arise -->
  <tr>
    <th rowspan="2">Line</th>
    <td>Line</td>
  </tr>
  <tr>
    <td>Line</td>
  </tr>
</table>

我想为 th 标签设置正确的边框，顶部和底部都有一些均匀的间隙。就像我在标题中所说的那样，我在 th 标签中使用了 after 伪元素，它在 IE 11 中不起作用。请参阅随附的代码以了解详细错误。

有人可以建议我解决这个问题吗？

提前致谢!

---

更新

我实现了@Mr Lister 的解决方案，它与单行 th + td 标签配合得很好。

出现的另一个错误是，当我将 th 与 rowspan 一起使用时，IE 11 中的行为再次被破坏。你能帮我彻底解决这个问题吗？

提前致谢!

Answer 1

看起来像个错误好吧。我不确定是否有解决方案，但这里有一个解决方法。

除了 th 内的线之外，在它后面的 td 内画另一条线(当然在屏幕上的相同位置)。

table {
  border-top: 1px solid #000;
  width: 100%;
}

tr, th, td {
  border-bottom: 1px solid #000;
}

th {
  padding: 30px;
  position: relative;
  text-align: left;
  width: 30%;
}

th:after {
  background: #000;
  bottom: 30px;
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 30px;
  width: 1px;
}

/* this is new */
th + td::before {
  background: #000;
  bottom: 30px;
  content: '';
  display: block;
  position: absolute;
  left: -3px;
  top: 30px;
  width: 1px;
}

td {
  padding: 30px;
  position: relative; /* and I added this line */
}

<table>
  <tr>
    <th>Line</th>
    <td>Line</td>
  </tr>
  <tr>
    <th>Line<br>Line<br>Line</th>
    <td>Line</td>
  </tr>
  <tr>
    <th>Line</th>
    <td>Line<br>Line<br>Line</td>
  </tr>
</table>

新 block 中的left: -3px是为了让新行和旧行在同一位置。
请注意，这取决于表格的 border-spacing 属性的值，默认情况下为 2px，但我怀疑你的意思是 0。如果你改变它，相应地调整这个。