Tabelle-Zelle mit position relative und Inhalt absolute Fehler in Firefox
Ich weiß wirklich nicht, was das problem mit meinem code...
Die Zelle ist relativ positioniert und die form absolut positioniert ist. In jedem Browser funktioniert es wie es sollte, aber nicht in Firefox...
Gibt 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>
Hier ist ein Turnschuh
http://jsfiddle.net/warface/8bWUe/2/
Suchen in firefox, werden Sie feststellen, dass die form "zu Favoriten hinzufügen" - Stapel auf einander, aber in anderer browser positionierte Sie just fine.
Irgendwelche Hinweise auf, wie es funktioniert hat, sollte es wie in Chrome, Safari, IE8+,...?
BEARBEITEN
Nach einigen Recherchen... Firefox hat dieses problem seit dem Jahr 2000
https://bugzilla.mozilla.org/show_bug.cgi?id=63895
Und Sie scheinen nicht zu geben, ein Mittelfinger über es, um es zu beheben... in der Hölle brennen Firefox!!!
- Ich sah Ihre Geige in Firefox und während der
form.favorite
element fällt von der Unterseite von meinem Bildschirm, ich sehe seine beiden Kinder nebeneinander. Können Sie bitte klären, was das problem ist? - haben Sie gesehen, die es in Chrome oder andere browser ??? Dies ist, wie ich es will. Ich dachte, es war klar, in der Frage, sorry
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier ist ein Update, das den geändert .Zell - >div {position:relative} und add height:100% des divs.
CSS
Hier ist die udpated fiddle
http://jsfiddle.net/8bWUe/19/
Funktioniert auf FF v22.0
War ich in der Lage, um die Formen gelegt, die in firefox mit der folgenden css:
Machen
statt "
table-row
" - das sollte den trick tun.