table中css定位差异

关于css定位有很多文章讲述：

如果有一个元素div ，他的position属性设置为absolute，那么这个div 的位置取决于其父元素中position值设置为relative的元素。如果在其父元素中没有一个元素的position值是relative、absolute、或者fixed，那么这个div位置将以 body位置为参考。

但是对于 firefox来说似乎不是每个元素都遵从这一规则，有如下一段代码

table{
	margin-left: 100px;
	margin-top: 50px;
}
td{
	height: 150px;
	width: 100px;
	position: relative;
}
td div{
	height: 30px;
	width: 50px;
	background-color: red;
	position: absolute;
	left: 10px;
	top:50px;
}
<table border="1">
	<tr>
		<td></td>
		<td></td>
		<td>
			<div>这是一个position：absolute元素</div>
		</td>
	</tr>
</table>

由于div元素的尺寸较小，理想的情况是div总是在最后一个td中，但是在firefox中div并不以td为参考，而是body。

所以要实现这个效果的兼容方式是在td中添加一个能应用position：relative的元素，上述代码可以更改为

<table border="1">
	<tr>
		<td></td>
		<td></td>
		<td>
                      <div style="position:relative;"
			<div>这是一个position：absolute元素</div>
                      </div>
		</td>
	</tr>
</table>

这样就可以保证 div元素始终在td中