Question

我创建了一个由按钮组成的水平菜单。我需要这些按钮来调整宽度，以便它们一起占据菜单容器宽度的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中使用类“按钮”）。

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

有没有人知道如何努力实现我的目标？

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

Answer 1

未定义表格单元格中的位置：relative

W3.org上的CSS规范表明，对于table-cell和其他表元素，position: relative的效果是未定义的。

有关详细信息，请参阅：http://www.w3.org/TR/CSS21/visuren.html#choose-position。

因此，某些浏览器似乎允许表格单元格像表格单元格中任何绝对定位的子元素的包含块一样（有关详细信息，请参阅http://www.w3.org/TR/CSS21/visuren.html#comp-abspos）。但是，某些浏览器在应用于表格单元格时不会尝试扩展规范并忽略position: relative。

您看到兼容浏览器的正常行为，但对于CSS规范未定义的行为，浏览器可以随意做或不做，因此结果会有所不同。

如何解决此问题

我为这些情况做了什么，我在块中放置了一个块级包装元素，它具有绝对定位（我设置了偏移，以便包装器填充表格单元格），然后绝对定位我的内部子元素包装。

使按钮按宽度和高度缩放

以下CSS将允许按钮元素填充表格单元格的宽度和高度：

body, html {
    height: 100%; /* if you want a to fil up the page height */
}
#menubar {
    width: 100%;
    height: 100%; /*or else fix this height... 100px for example */
    display: table;
    table-layout: fixed;
}
#menu {
    display: table-row;
}
#menu .button {
    display: table-cell;
    border: 1px dotted blue;
    height: 100%; /* scale the height with respect to the table */
}
#menu .button Button {
    width: 100%;
    height: 100%; /* scale the height with respect to the table cell */
}

您需要为#menubar设置一个高度，然后确保表格单元格和按钮都有height: 100%（想想一个继承链，表到表格单元格，然后table-cell to button）。

小提琴：http://jsfiddle.net/audetwebdesign/7b9h9/

Answer 2

从#menu .button Button

中删除右侧，底部，顶部和左侧定位

对于实例，

#menu .button Button {
    position: absolute;
    /*right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;*/
}

以下是 WORKING DEMO

如果您需要纯display:table-cell;解决方案，则只需删除positioning

即可

对于实例，

#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;
}

以下是 WORKING DEMO - 2

修改

要拉伸按钮以占据宽度，这是解决方案。

守则：

#menu .button Button { width: 100%; }

以下是 WORKING DEMO - 3

编辑 - 2

根据OP的要求暗示为按钮添加高度的规定，以下是相同的解决方案。增加height:100%;是OP对此解决方案的贡献。

#menu .button Button { display:table-cell; width: 100%; height:100%; }

以下是 WORKING DEMO - 4

位置相对不使用显示表格单元格？

2 个答案:

未定义表格单元格中的位置：relative

如何解决此问题

使按钮按宽度和高度缩放