ie下无法显示的td的border

最近做的项目中用到了表格,css中设置了td统一的border和不同的background,并且table也设置了background。

在chrome下td的border正常展示出来了,但IE下td的border却看不到,使用开发者工具查看td的border属性设置也正常。但就是看不到

后来这网上搜到了一片相关的资料。经过验证原因如下:

1、table设置了border-collapse:collapse;

2、td设置了background以及position:relative;

代码如下:

<style>
#test{
background:green;
border-collapse:collapse;
}
#test td{
background:blue;
border:1px solid yellow;
padding:10px;
position:relative;
}

</style>

<table id="test">
<tr>
<td>监测站</td>
<td>区域</td>
<td>降水量</td>
</tr>
<tr>
<td>朝阳站</td>
<td>朝阳区</td>
<td>50</td>
</tr>
<tr>
<td>通州站</td>
<td>通州区</td>
<td>60</td>
</tr>
</table>

猜你喜欢

转载自www.cnblogs.com/tblj/p/9142101.html