最近做的项目中用到了表格,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>