在IE9中，TD上的伪元素：after没有得到正确的TD高度，有解决这个问题的方法吗？

Question

我正在使用的设计需要在表格行周围有一个边框。由于其他复杂的原因，我不能直接使用 border 属性来实现这一点。我已经尝试了 2 种方法，都涉及使用伪元素 ：after。

1. 我用了tr:after.这适用于除IE8+以外的所有浏览器。IE 根本不呈现在 tr:after 下指定的样式。

2. 我也试过td:after.这次边框出现在IE8+中，但IE不会在td的整个高度周围呈现边框，尽管CSS说了什么。

http://jsfiddle.net/kxmhW/2/请看一下，让我知道是否有办法解决这个问题。链接中的第一个表使用 tr：after。第二个表使用 td:after 。

谢谢。

Answer 1

如果您只是想在行周围添加边框，那么这样的事情会适合您的情况吗？

.CSS

table {
border-collapse: collapse;
}
td {
background: #ddd;
width: 100px;
}
.tr-border  tr {
border: 2px solid red;
}

.HTML

<table class="tr-border">
      <tr>
        <td>1</td>
        <td>Lorem</td>
        <td>123,456</td>
        <td>XXXX</td>
        <td>$10.24</td>
        <td>Lorem Ipsum Dolor Sit Amet, Consect EturLorem Ipsum Dolor Sit Amet.</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Lorem</td>
        <td>123,456</td>
        <td>XXXX</td>
        <td>$10.24</td>
        <td>Lorem Ipsum Dolor Sit Amet, Consect EturLorem Ipsum Dolor Sit Amet.</td>
      </tr>
  </table>
  <br />
  <table class="tr-border">
      <tr>
        <td>1</td>
        <td>Lorem</td>
        <td>123,456</td>
        <td>XXXX</td>
        <td>$10.24</td>
        <td>Lorem Ipsum Dolor Sit Amet, Consect EturLorem Ipsum Dolor Sit Amet.</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Lorem</td>
        <td>123,456</td>
        <td>XXXX</td>
        <td>$10.24</td>
        <td>Lorem Ipsum Dolor Sit Amet, Consect EturLorem Ipsum Dolor Sit Amet.</td>
      </tr>
  </table>

小提琴

http://jsfiddle.net/krishollenbeck/kxmhW/30/