相关疑难解决方法(0)

当我尝试使用position: relative/ position: absolute上<th>或<td>在Firefox它似乎并没有工作.

我有这样一张桌子:

<table cellspacing="0">
    <tr>
        <td>Row 1</td>
        <td><button>Button 1</button></td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td><button>Button 2</button></td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td><button>Button 3</button></td>
    </tr>
</table>

我想绝对将每个按钮放在表格行的右上角,所以我使用了这个CSS,期望<tr>包含<button>:

tr {
    position:relative;
}
button {
   position:absolute;
   top:0;
   right:0;   
}

但是,按钮全部堆叠在同一个地方.它通常使用<div>s 工作正常,除了display:table-row在测试时我发现使用它时仍会表现这种方式,这对我来说是一个惊喜.

演示:http://jsfiddle.net/QU2zT/1/

注意:我的实际标记更复杂,我试图定位的元素可能出现在它行的任何表格单元格中的任何位置,这就是我认为我需要的原因position:absolute.

1. 为什么会这样？
2. 如何在不改变标记的情况下使用CSS解决这个问题？

编辑:Firefox中的结果与Chrome和IE9中的结果不同(尚未测试).FF是一个彻底的失败,而其他浏览器只能在演示中看到包含"带表格显示的div"设置.

我有一个简单的水平菜单,有两个级别.此菜单延伸至包装纸的100%宽度.这是小提琴:http://jsfiddle.net/gpsgv/

如果您在除Firefox之外的任何浏览器中运行此小提琴,它将按预期显示以下内容:

如果你在Firefox中运行这个小提琴,它会显示以下内容:

查看代码,第二级列表绝对位于第一级项目(具有display: relative样式)内.因此,将left: 10px样式设置为第二级列表应该将其定位为距离其相对定位的祖先的左侧10px.同样的top: 30px.但是在Firefox中,它将它定位在左侧和顶部我不知道是什么,也许是身体？

我的问题是,是否有任何解决方案可以在Firefox中正确显示,而无需更改HTML？

PS我用,display: table-cell因为菜单必须沿100%容器宽度均匀分布.