html - 在 IE9 中，TD 上的伪元素 :after 没有得到正确的 TD 高度，有解决办法吗？

Question

我正在使用的设计需要围绕表格行的边框。由于其他复杂的原因，我不能直接使用边框属性来实现这一点。我尝试了 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/