我创建了一个由按钮组成的水平菜单。我需要这些按钮来调整宽度，以便它们占据菜单容器宽度的100％。它应该与TD在TABLE中相同。
这样，这里是我提出的代码：
<div id="menubar">
<div id="menu">
<div class="button">
<Button>Button 1</Button>
</div>
<div class="button">
<Button>Button 2</Button>
</div>
<div class="button">
<Button>Button 3</Button>
</div>
<div class="button">
<Button>Button 4</Button>
</div>
</div>
</div>
和我的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”时，不是相应的位置“相对”。
有没有人知道一个工作来实现我要做的事情？
注意：菜单是动态的，所以我不知道有多少个按钮，所以我不能提供每个按钮的百分比宽度。
解决方法
从#menu .button按钮中删除右，下，上，左定位
例如，
#menu .button Button {
position: absolute;
/*right: 0px;
bottom: 0px;
top: 0px;
left: 0px;*/
}
如果你想要纯显示：table-cell;解决方案，你只需要去除定位
例如，
#menubar {
width: 100%;
height: 100%;
display: table;
table-layout: fixed;
}
#menu {
display: table-row;
}
#menu .button {
display: table-cell;
}
#menu .button Button {
right: 0px;
bottom: 0px;
top: 0px;
left: 0px;
}
编辑
要拉伸按钮占据宽度，这里是解决方案。
代码：
#menu .button Button {
width: 100%;
}
编辑 – 2
根据OP的要求，暗示为按钮添加高度的条款，这里是相同的解决方案。加高度：100％; OP是该解决方案的贡献。
#menu .button Button {
display:table-cell;
width: 100%;
height:100%;
}
