Firefox 位置：绝对和宽度：100% 显示：表格单元奇怪的行为答案

【问题标题】：Firefox position:absolute and width: 100% on display:table-cell weird behaviourFirefox 位置：绝对和宽度：100% 显示：表格单元奇怪的行为
【发布时间】：2014-07-12 16:10:24
【问题描述】：

我正在尝试为我的网站制作一个简单的水平菜单。

这是我目前所拥有的。

HTML：

<div id="header-buttons">
    <div class="button ">
        <div class="button-stripe" style="background-color: rgb(200, 113, 55); bottom: -41px;">
        </div>
        <a class="button-text" href="#" style="bottom: -41px;">
            First
        </a>
    </div>
    <div class="button ">
        <div class="button-stripe" style="background-color: #0069ff">
        </div>
        <a class="button-text" href="#">
            Second
        </a>
    </div>
    <div class="button ">
        <div class="button-stripe" style="background-color: rgb(55, 200, 55); bottom: -41px;">
        </div>
        <a class="button-text" href="#" style="bottom: -41px;">
            Third
        </a>
    </div>
</div>

CSS：

#header-buttons {
    position: relative;
    top:15px;
    height: 45px;
    background-color: #333;
    overflow: hidden;
    font-family: "Open Sans Condensed";
    display: table;
    width: 100%;
}

.button>a.button-text {
    position: relative;
    top: 0;
    left:0;
    color: #fff;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
}

.button>.button-stripe {
    position: absolute;
    bottom: -41px;
    left: 0px;
    width: 100%;
    height: 45px;
}

.button {
    position: relative;
    display: table-cell;
    height: 100%;
    line-height: 45px;
}

Javascript：

$(function() {
    $(".button").each(function(index) {
        var me = $(this);
        if(me.hasClass("selected")) {
            me.css('backgroundColor', me.children(1).css('backgroundColor'));
            return;
        }
        var children1 = me.children(1);
        me.mouseenter(function() {
            children1.stop().animate({bottom: 0}, 250);
        });
        me.mouseleave(function() {
            children1.stop().animate({bottom: -41}, 250);
        });
    });
});

在几乎所有浏览器中一切正常，但在 Firefox 中，div.button-stripe 似乎采用 width:100% 的 #header-buttons 而不是 .button。

在所有浏览器中会发生什么：

在 Firefox 中会发生什么：

还有一个JSFiddle here

为什么会这样？有解决方法吗？我的firefox版本是28.0

【问题讨论】：

标签： html css firefox width absolute

【解决方案1】：

Firefox 在带有display:table[-...] 的元素上存在position:relative 的已知问题。参见例如：Firefox, display:table-cell and absolute positioning

所以你必须添加另一个容器元素来实现相对定位。

我已经更新了您的 JSFiddle（大致是为了展示这个概念）。我还不得不稍微更改您的 JS 代码。

Updated JSFiddle

【讨论】：