logo标签列表

如何在Firefox中将一个元素定位在其容器底部？

htmlcsspositioning
10

我有一个表格单元，我希望其中的一个

总是位于左下角。以下代码在IE和Safari上运行良好，但Firefox会将
绝对定位在页面上而不是单元格内部（该代码基于此处的解决方案）。我已经测试过使用DTD和不使用DTD的情况，分别将Firefox置于怪癖模式和标准模式下，都无法正常工作。我陷入了困境 - 有任何想法吗？

<!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>
你找到了做这件事的方法吗？ - Alex from Jitbit
很遗憾听到这个消息...最终我添加了一个新的无边框"<TR>"来容纳底部内容。 - Alex from Jitbit
7个回答
7
根据W3C，position:relative对表格单元格没有影响：

"在table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell和table-caption元素上使用'position:relative'的效果是未定义的。"

解决方法是给表格单元格添加额外的包装div。 编辑：这个div需要设置height: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>
那不会将它推到底部 :( - Chris Marasti-Georg
编辑后的代码示例。我在 Firefox 3 中测试过，可以运行。 - Aron Rotteveel
1
在FF3中，这对我来说没有推到底部。http://i36.tinypic.com/znqxpv.jpg - Chris Marasti-Georg
在这种情况下，“height:100％”完全没有作用。请参见CSS2：“如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值计算为'auto'”。因此，由于父级“td”没有明确的高度，所以div的高度被计算为其内容的高度，而不管100％的规定。 - Periata Breatta
1
将 display:block 应用于表格，现在 Firefox 将尊重 position:relative。
在FF18中，这会导致表格无法保持其宽度，并且元素会绝对定位于表格的偏移父级（在本例中为窗口）。 - Chris Marasti-Georg
1

看看这是否适合您。不确定问题的确切性质，但它与使用相对定位的td有关。我用div标签包装了表格，并将其相对定位，似乎实现了您想要的效果。

<!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; }
        th { width:100px; }
        div.body {position:relative; width:500px;}
        .manage { text-align:right; position:absolute; bottom:0; right:0; display:block}
        </style>
    </head>
    <body >
    <div class="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>
    </table></div>
    </body>
</html>
不幸的是，当我向表格添加另一行且外观相同时，这个就会出错。 - Chris Marasti-Georg
0

position: relative 显然不是全局支持 td 标签的。不幸的是，我找不到权威的来源。

您可能想在 td 中放置一个带有所需大小的 div 块，并将 position: relative 应用于该块。

1
尝试这样做，我无法让div填充td。 - Chris Marasti-Georg
0
这可能听起来非常明显，但你尝试过在.manage中使用vertical-align: bottom;吗？
0
在TD内部放置一个宽度为100％，高度为100％的DIV，然后将其设置为position: relative。
2
这个不起作用 - 内部 div 没有被推到底部。 - Chris Marasti-Georg
0

没错，对于表格元素，position:relative没有效果，而且Firefox也应用了这个规则。 使用div的解决方案是可行的，但在我看来，这是可怕的标记。

你一定需要使用表格来显示这个内容吗？（或者它是相对的？）

如果不是，为什么不使用div元素并实现你想要的效果呢？

使用表格进行布局问题已经过时了...

1
我正在显示的数据是表格形式的。其中一列显示评论的上下文，另一列显示评论本身。既然有一个语义丰富的元素适用于我的情况，为什么要使用没有语义意义的元素呢？ - Chris Marasti-Georg
好的，但是使用定义列表（dl）而不是表格也可以是一种语义化的解决方案。 - alexmeia
它们并不是真正的定义。有没有一种方法可以确保在内容更改时，dt和dd保持相同的高度？ - Chris Marasti-Georg
这可能是一个解决方案： http://www.maxdesign.com.au/presentation/definition/dl-table-display.htm - alexmeia
我非常兴奋 - 它似乎可以做我需要的一切。甚至在左侧和右侧（dt和dd）之间有一个边框。不幸的是，如果dt内容比dd内容长，它会在IE中断。 - Chris Marasti-Georg
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接