html - 相对位置不适用于显示表格单元格？

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 内)。

经过进一步研究，这似乎是 Mozilla 的一个已知问题，当显示设置为“表格单元格”时，这不是各自的“相对”位置。

有人知道实现我想要做的事情的变通方法吗？

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

Answer 1

使用位置:表格单元格中的相对位置未定义

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

参见:http://www.w3.org/TR/CSS21/visuren.html#choose-position了解更多详情。

因此，某些浏览器似乎允许表格单元格的行为类似于表格单元格内任何绝对定位子元素的包含 block (有关更多详细信息，请参见 http://www.w3.org/TR/CSS21/visuren.html#comp-abspos)。但是，某些浏览器不会尝试扩展规范并且在应用于表格单元格时会忽略 position: relative。

您看到的是兼容浏览器的正常行为，但对于 CSS 规范未定义的行为，浏览器可以自由地做或不做他们喜欢做的事，因此结果会有所不同。

如何解决这个问题

我在这些情况下所做的是，我在具有绝对定位的单元格中放置一个 block 级包装元素(我设置偏移量以便包装填充表格单元格)，然后绝对定位我的内部子元素相对于包装器。

使按钮在宽度和高度上都缩放

以下 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 设置高度，然后确保 table-cell 和按钮都具有 height: 100%(想想一条链继承，表格到表格单元格，然后表格单元格到按钮)。

fiddle :http://jsfiddle.net/audetwebdesign/7b9h9/