Tabellenzelle mit Position relativ und Inhalt absolute Fehler in Firefox

Question

Ich weiß nicht wirklich, was das Problem mit meinem Code ist ...

Die Zelle ist relativ positioniert und die Form absolut positioniert ist. In jedem Browser funktioniert es so wie es sollte, aber nicht Firefox ...

Hat es Probleme mit Tabellen-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,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> 

ist hier eine Geige

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

Blick in firefox, you'l Ich merke, dass die Form "Add to Favorite" aufeinander stapelt, aber in anderen Browsern ist es gut positioniert.

Irgendwelche Hinweise, wie es funktioniert, sollte es in Chrome, Safari, IE8 +, ... gefallen?

EDIT

Nach einigen Recherchen ... hat Firefox dieses Problem seit 2000

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

Und sie scheinen nicht einen Mittelfinger zu geben, um es zu beheben .. Brand in der Hölle Firefox!

Answer 1

konnte ich die Formulare in Firefox mit folgenden CSS platziert bekommen:

.cell> div {position: relative}

Answer 2

Machen

.row 
{ 
     display: block; 
     position:relative 
} 

statt "table-row" - das sollte den Trick machen.

Answer 3

Hier ist ein Update, das die modifizierte .cell> div {position: relative} nimmt und Höhe: 100% zu den divs.

CSS

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

Hier ist die udpated Geige

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

Werke auf FF v22.0