css - IE 表格单元格上的 100% 高度伪元素

Question

我在 IE9、10、11 中遇到一个问题，其中一个 ::after伪元素不会填充其高度的 100% td parent 。

如果第二行的第一列有两行文本，伪元素会毫无问题地填满整个高度。所以，我认为问题的发生是因为 td没有填充 tr 的高度但事实并非如此。

第一张截图是Chrome，第二张是IE9

HTML

<table>
  <tr>
    <td>Two<br/>Lines</td>
    <td>Two<br/>Lines</td>
  </tr>
  <tr>
    <td>One Line</td>
    <td>Two <br/>Lines</td>
  </tr>
</table>

CSS

table td {
  border-bottom: 1px solid;
}

table td:first-child {
  position: relative;
}

table td:first-child::after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 2px;
  height: 100%;
  display: block;
  background-color: orange;
}

代码笔:http://codepen.io/cbier/full/BjpaqB/

P.S. 我正在使用 ::after出于特殊原因使用伪元素而不是边框​​，这是一个要求

谢谢!

Answer 1

可以为整个表格使用一个伪元素吗？

table {
  overflow: hidden;
}
table td {
  border-bottom: 1px solid;
}
table tr:first-child td:first-child {
  position: relative;
}
table tr:first-child td:first-child:after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 2px;
  height: 1000px;
  display: block;
  background-color: orange;
}

<table>
  <tr>
    <td>Two<br/>Lines</td>
    <td>Two<br/>Lines</td>
  </tr>
  <tr>
    <td>One Line</td>
    <td>Two <br/>Lines</td>
  </tr>
</table>

另一种方式，背景:线性渐变

table td {
  border-bottom: 1px solid;
}
table td:first-child {
  background-image: linear-gradient(270deg, orange 3px, transparent 3px);
}

<table>
  <tr>
    <td>Two<br/>Lines</td>
    <td>Two<br/>Lines</td>
  </tr>
  <tr>
    <td>One Line</td>
    <td>Two <br/>Lines</td>
  </tr>
</table>