细胞相对定位,形状绝对定位.在每个浏览器中它都应该工作,但不是Firefox ……

表CSS有问题吗？

CSS

.table                              { display: table; width:100%; height:100%; table-layout: fixed; }
.row                                { display: table-row; height: 1px; }
.cell                               { display: table-cell; vertical-align: middle; position: relative; }
.menu .cell                         { width: 33.33%; border: 1em solid #000; font-size: 1.14em;
                                    background: #fff; background-clip: padding-Box; vertical-align: top; position: relative; }

.menu .cell header                  { padding:.5em 1em; background-color: #383430; color: #fff; line-height: 1.2; position: relative; }
.menu .cell .content                { padding:2em 1em 3em 1em;}
.menu .cell h3                      { font-size: 1em; text-transform: uppercase; text-decoration: underline; font-weight:300;} 
.menu .cell ul                      { margin: 0; padding: 0; list-style: none; }
.menu .cell li                      { line-height: 1.4; padding:0.25em 0; border-bottom: 1px solid #ecece6;}
.menu .cell li:last-child           { border-bottom: none; margin-bottom: 0;}



.menu .like header:before           { content : 'on aime !'; position: absolute; bottom: 100%; left: 1em; 
                                    text-transform: uppercase; font-size: .8em; padding: 3.5em .5em .5em .5em; border-radius: 1em 1em 0 0; 
                                    background: #dd582a url(imgs/on-aime.png) center .5em no-repeat; Box-shadow:  0px 0px 2px 0 rgba(0,.5); }


.menu .favorite                     { position: absolute; bottom: -.75em; right: -.75em;  display: block; width: 100%; overflow: hidden;}
.menu .favorite input               { position: absolute; top: -30em;}

.menu .favorite label,.menu .favorite label:before        { background-color: #dd582a; height: 32px; white-space: nowrap;
                                    float: right;  color: #fff; background-image: linear-gradient(#dd582a 50%,#bd5d3b 100%); }
.menu .favorite label:hover,.menu .favorite label:hover:before{background-image: linear-gradient(#bd5d3b 5%,#dd582a 50%); }

.menu .favorite label               { text-align: center; font-size: 24px; width: 32px; display: block; 
                                    line-height: 28px; border-radius: 4px; cursor: pointer;}

.menu .favorite label:before        { content: "Add to favorite"; display: block; position: absolute; right: 34px;
                                    padding:0 8px; font-size: 14px; line-height:32px  }
.menu .favorite input:checked + label { color: #e77248; background-color: #fff;background-image: linear-gradient(#ffffff 50%,#bfbfbf 100%); }
.menu .favorite input:checked + label:hover{background-image: linear-gradient(#bfbfbf 5%,#fff 50%);}
.menu .favorite input:checked + label:before { content: "Like"}

HTML

<div class="table menu">

    <div class="row">
<div class="cell">
    <div >
        <header>100 $</header>
        <div class="content">
            <h3>Title 1</h3>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
                <li>Item 6</li>
            </ul>
        </div>
        <form class="favorite">
            <input id="bal-menu2" type="checkBox" name="bal-menu2" value="favorite" />
            <label for="bal-menu2">♥</label>
        </form>
    </div>
</div>
        <div class="cell">
    <div >
        <header>100 $</header>
        <div class="content">
            <h3>Title 1</h3>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
                <li>Item 6</li>
                <li>Item 7</li>
                <li>Item 8</li>
            </ul>
        </div>
        <form class="favorite">
            <input id="bal-menu2" type="checkBox" name="bal-menu2" value="favorite" />
            <label for="bal-menu2">♥</label>
        </form>
    </div>
</div>
    </div></div>

这是一个小提琴

http://jsfiddle.net/warface/8bWUe/2/

看看firefox,你会注意到“添加到收藏夹”的形式相互叠加,但在其他浏览器中它定位得很好.

有关如何使其工作的任何线索,它应该像Chrome,Safari,IE8,……？

编辑

经过一些研究……自2000年以来Firefox就出现了这个问题

https://bugzilla.mozilla.org/show_bug.cgi?id=63895

而他们似乎没有给它一个中指来解决它…在地狱火灾！