IE8不显示所有表格边框

Question

编辑：我最终切换到ul / li列表。但我仍然想知道，桌子也应该有解决方案。

我已经设置了一个带有边框的html表格的TD元素。在现代浏览器中显示完美。但是，虽然可以辩论，但我不能尽可能地支持IE8。

坦率地说，IE8正在使用表格边框做奇怪的事情。我已经看过很多在这里提出的问题，但我找不到任何问题可以解决我的问题。

桌子应该在它的所有侧面都有边框的TD元素。 IE8仅渲染左边框和buttom边框。正如您在下面的屏幕截图中看到的那样。代码位于图像下方。我无法找到解决方案，希望你们中的一些人有任何想法。

非常感谢任何想法！ 链接：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?