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

Question

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

这是我到目前为止所做的。

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

Answer 1

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

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

我已经更新了你的JSFiddle（粗略地说，只是为了展示这个概念）。 我还需要稍微更改你的JS代码。

Updated JSFiddle