コードの何が問題なのか本当にわかりません...
セルは相対的に配置され、フォームは絶対的に配置されます。すべてのブラウザで正常に動作しますが、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,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>
ここにフィドルがあります
http://jsfiddle.net/warface/8bWUe/2/
Firefox を見ると、「お気に入りに追加」フォームが互いに重なっていることがわかりますが、他のブラウザでは問題なく配置されています。
それを機能させる方法の手がかりは、Chrome、Safari、IE8+ などのようにする必要がありますか?
編集
いくつかの調査の後... Firefoxには2000年以来この問題があります
https://bugzilla.mozilla.org/show_bug.cgi?id=63895
そして、彼らはそれを修正するためにそれについて中指を立てていないようです...地獄のFirefoxで燃えてください！