在IE9中，偽元素：在TD上之后沒有獲得正確的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/