html - IE8不显示所有表格边框

Question

编辑：我最后转到了ul/li列表。但我仍然想知道，应该有一个解决方案，与表以及。
我有一个html表格，上面有TD元素的边框。在现代浏览器中显示完美。但是，虽然可以争论，但我不想尽可能多地支持IE8。
坦率地说，IE8在桌面边界上做着奇怪的事情。我看了很多问题，但没有一个能回答我的问题。
这个表应该在TD元素的所有边上都有边框。IE8只呈现左边框和按钮边框。你可以在下面的截图上看到。代码在图像下面。我找不到解决办法，希望你们有人知道。
非常感谢你的任何想法！
链接：Working example
CSS代码：

.pricing-table{
border-collapse:collapse;
margin:20px;
padding:20px;
}

.pricing-table td {
width: 210px;
padding: 10px 0px;

border-top:1px solid #FFFFFF;
border-bottom:1px solid #e9e9e9;
border-left:1px solid #cdcdcd;
border-right:1px solid #cdcdcd;

font-size: 14px;
font-weight:bold;
line-height: 35px;
color: #555;
text-shadow: 0 1px 0 #fff;

background: -webkit-gradient(linear, left top, left bottom, from(rgb(250, 250, 250)), to(rgb(237, 237, 237)));
background: -webkit-linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
background: -moz-linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
background: -o-linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
background: -ms-linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
background: linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fafafa', EndColorStr='#ededed'); /*IE6 & IE7 gradient*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fafafa', endColorstr='#ededed')"; /*IE8 gradient*/
}
.pricing-table td span.icon-accept-16x16{
display:inline-block;
width:16px;
height:16px;
margin:0 10px;
background: url(img/icon-accept-16x16.png);
}
.pricing-table td.orange{
background:#ee5420;
filter:none;/*Fallback: IE 8 and below*/

font: 'Open Sans', sans-serif;
font-weight:600;

border-bottom:1px solid #b73f16;
border-top:1px solid #cdcdcd;
border-left:1px solid #ee5420;
border-right:1px solid #ee5420;

}
.pricing-table td.orange h2{
margin:0;
padding:0 0 0 36px;
font-size: 20px;
font-weight:600;
color:#FFF;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
line-height:40px;
}
/* Table Head  */
.pricing-table thead td.orange {
border:none;/*Not ideal, try ti find a fix*/
-webkit-top-left-border-radius: 5px;
-moz-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-top-right-border-radius: 5px;
-moz-border-top-right-radius: 5px;
border-top-right-radius: 5px;
}



/* Footer */
.pricing-table tfoot td {
width: 190px;
padding: 20px 10px;
text-align: center;
line-height: 18px;
background: #ffffff;
filter:none;

font-size: 11px;
font-weight:normal;
color: #828282;

-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;

-webkit-box-shadow: 0px 2px 0px #e4e4e4;
-moz-box-shadow: 0px 2px 0px #e4e4e4;
box-shadow: 0px 2px 0px #e4e4e4;
}

下面是HTML：

<table class="pricing-table" >
<thead>
<tr>
<td class="orange">
<h2>Voor leerlingen</h2>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>Online topotrainer</td>
</tr>
<tr>
<td>Topografieboekje</td>
</tr>
<tr>
<td>Jouw resultaten</td>
</tr>
<tr>
<td class="orange">
<h2>Voor docenten</h2>
</td>
</tr>
<tr>
<td>Toetsen genereren</td>
</tr>
<tr>
<td>Leerlingen volgen</td>
</tr>
<tr>
<td>Boekjes bestellen</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Topografie in de Klas is een 100% gratis lesmethode voor Topografie in het onderwijs.    </td>
</tr>
</tfoot>
</table>

Answer 1

我已经在IE8中测试过这个链接，看起来运行良好。
试试这件衣服的尺码。。。
How does one target IE7 and IE8 with valid CSS?