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

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

未定义在表格单元格中使用position:relative

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

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

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

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

如何解决这个问题

我为这些情况做了什么,我在一个具有绝对定位的单元格中放置一个块级包装元素(我设置偏移量以便包装器填充表格单元格),然后相对于包装器绝对定位我的内部子元素.

制作按钮在宽度和高度上缩放

以下CSS将允许button元素填充表格单元格的宽度和高度:

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%(想象一个继承链,表到表格单元格,然后表格单元格到按钮).

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

Answer 2

从中移除右侧,底部,顶部和左侧定位 #menu .button Button

例如,

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

这是工作演示

如果你想要纯粹的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;
}

这是工作演示 - 2

编辑

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

代码:

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

这是工作演示 - 3

编辑 - 2

根据OP的要求暗示为按钮添加高度的规定,这里是解决方案.增加的height:100%;是OP对此解决方案的贡献.

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

这是工作演示 - 4