table-cell con la posizione relativa e assoluta contenuti bug in Firefox

Question

Io davvero non so qual è il problema con il mio codice ...

La cella è posizionato rispetto e la forma è posizionato assoluto. In ogni browser funziona come dovrebbe ma non Firefox ...

Ha problemi con i CSS tabella?

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,0,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> 

Ecco un violino

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

Cerca in firefox, you'l Ho notato che il modulo "aggiungi ai preferiti" si impila l'uno sull'altro ma in altri browser è posizionato bene.

Eventuali indizi su come farlo funzionare dovrebbe avere come in Chrome, Safari, IE8 +, ...?

EDIT

Dopo alcune ricerche ... Firefox ha questo problema dal 2000

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

E loro non sembrano dare un dito medio su di esso per risolvere il problema .. brucia in inferno Firefox!

Answer 1

sono stato in grado di ottenere i moduli collocati in Firefox con il seguente CSS:

.cell> div {position: relative}

Answer 2

Fai

.row 
{ 
     display: block; 
     position:relative 
} 

invece di "table-row" - quello dovrebbe fare il trucco.

Answer 3

Ecco una correzione che accetta la posizione modificata .cell> div {: relative} e aggiunge altezza: 100% alle div.

CSS

.row { display: table-row; height:100%; } 
.cell div {height:100%; position: relative } 

Ecco il violino udpated

http://jsfiddle.net/8bWUe/19/

Opere su FF v22.0