我有一个桌面单元格,我想要一个div,总是在左下角.以下工作在IE和Safari中可以正常工作,但Firefox将绝对放置在页面上,而不是在单元格内(基于解决方案解决方案
here的代码).我已经测试了有没有DTD,这使得Firefox在Quirks模式和标准模式下都无法正常工作.我被困 – 任何想法？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
table { width:500px; }
th,td { vertical-align: top; border:1px solid black; position:relative; }
th { width:100px; }
.manage { text-align:right; position:absolute; bottom:0; right:0; }
</style>
</head>
<body >
<table>
<tr>
<th>Some info about the following thing and this is actually going to span a few lines</th>
<td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
</tr>
<tr>
<th>Some info about the following thing and this is actually going to span a few lines</th>
<td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
</tr>
</table>
</body>
</html>
解决方法
根据
W3C,位置：相对对表格单元没有影响：
“The effect of ‘position:relative’ on
table-row-group,table-header-group,
table-footer-group,table-row,
table-column-group,table-column,
table-cell,and table-caption elements
is undefined.”
编辑：这个div需要一个高度：100％和位置：相对;被设置.
<table>
<tr>
<td>
<div style="position:relative;height:100%;">
Normal inline content.
<div class="manage">your absolute-positioned content</div>
</div>
</td>
</tr>
</table>
