我有一个表格单元格，我希望其中的 div 始终位于左下角。以下在 IE 和 Safari 中运行良好，但 Firefox 定位为div绝对在页面上，不在单元格内（代码基于解决方案here）。我已经测试了使用和不使用 DTD 的情况，这使 Firefox 处于 Quirks 模式和 Standards 模式，但都无法正常工作。我被困住了 - 有什么想法吗？
<!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，position:relative 对表格单元格没有影响：
“‘位置：相对’的影响
表行组、表头组、
表页脚组、表行、
表列组、表列、
表格单元格和表格标题元素
是未定义的。”
解决方案是向表格单元格添加一个额外的环绕 div。
EDIT:这个div需要一个height:100% and position:relative;要设置。
<table>
<tr>
<td>
<div style="position:relative;height:100%;">
Normal inline content.
<div class="manage">your absolute-positioned content</div>
</div>
</td>
</tr>
</table>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
