html表格的相对相对和绝对位置,html – 位置相对不能使用显示表格单元格？

我创建了一个由按钮组成的水平菜单。我需要这些按钮来调整宽度，以便它们占据菜单容器宽度的100％。它应该与TD在TABLE中相同。

这样，这里是我提出的代码：

Button 1

Button 2

Button 3

Button 4

和我的CSS：

#menubar {

width: 100%;

height: 100%;

display: table;

table-layout: fixed;

}

#menu {

display: table-row;

}

#menu .button {

position: relative;

display: table-cell;

}

#menu .button Button {

position: absolute;

right: 0px;

bottom: 0px;

top: 0px;

left: 0px;

}

这在Mozilla以外的每个浏览器中都是完美的。 Mozilla似乎并不尊重按钮类的相对位置，因此按钮所有的位置绝对是彼此之间的顶点(而不是绝对在DIV中，类“button”)。

经过一些进一步的研究，似乎这是Mozilla的一个已知问题，当显示设置为“table-cell”时，不是相应的位置“相对”。

有没有人知道一个工作来实现我要做的事情？

注意：菜单是动态的，所以我不知道有多少个按钮，所以我不能提供每个按钮的百分比宽度。