IE

Question

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

如果第二行中的第一列有两行文本，则伪元素将填充整个高度没有问题。所以，我认为问题正在发生，因为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;
}

Codepen：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>

Answer 2

您可以使用以下代码：

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

它在chrome以及IE 9

中提供相同的输出