如何在Firefox的容器底部放置一个元素？

编程入门行业动态更新时间:2024-10-28 06:26:48

本文介绍了如何在Firefox的容器底部放置一个元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我有一个表格单元格，我想要一个div在其内总是在左下角。下面的工作正常在IE和Safari，但Firefox是定位 div 绝对在页面上，而不是在单元格内（基于解决方案解决方案的代码这里）。我测试了有和没有DTD，这使Firefox处于Quirks模式和标准模式，并且都不能正常工作。

I have a table cell, and I want a div within it to always be at the bottom left corner. The following works fine in IE and Safari, but Firefox is positioning the div absolutely on the page, not within the cell (code based on the solution solution here). I have tested both with and without the DTD, which put Firefox in Quirks mode and Standards mode, and neither worked properly. I'm stuck - any ideas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="www.w3/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对表格单元格没有影响：

According to the W3C, position:relative has no effect on table cells:

position：relative对的影响table-row-group，table-header-group， table-footer-group， table-row， table-column-group，table-column， table-cell和table-caption元素未定义。

"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。

The solution is to add an extra wrapping div to the table cell.

EDIT：此div需要高度：100％和 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>