html - 在IE9中，伪元素:after on a TD doesn't get the correct TD height,有解决办法吗？

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>

fiddle

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