CSS "contorno" il comportamento comportamento diverso su Webkit e Gecko

Question

sto lavorando su un esperimento & ho scoperto che la proprietà CSS2 "bozza" non è implementata nello stesso modo su Webkit & Gecko

Nello script di seguito , Ho una posizione assoluta div all'interno di un altro div, ma fluttuante al di fuori di esso. Lo schema su Webkit delinea l'effettivo parent dev su Gecko, si espande per coprire l'elemento figlio.

http://jsfiddle.net/KrCs4/

Mi sto perdendo qualcosa? C'è una proprietà che devo sovrascrivere su Gecko? o dovrebbe essere segnalato come un bug?

Webkit Screenshot:

Firefox Screenshot:

EDIT:

E 'confermato tratta di un problema ed ecco una soluzione: http://jsfiddle.net/7Vfee/ (è necessario assicurati che il genitore sia posizionato: relativo o assoluto per t la sua soluzione per lavorare.

Answer 1

Questo comportamento incoerente di Gecko è ben nota e abbastanza adeguatamente documentato, anche se stranamente non a MDN ma al SitePoint Reference:

Firefox fino al versione 3.5 sarà disegnare il contorno contorno intorno al contenuto di un elemento che ha oltrepassato i suoi limiti piuttosto che attorno alle effettive dimensioni dell'insieme dell'elemento.

Questo continua a influire su tutte le versioni di Firefox. Al momento non vedo una valida alternativa al problema, se non quella di rimuovere il tuo div in posizione assoluta dal genitore e posizionarlo rispetto a ... qualcos'altro.

Answer 2

Ho avuto lo stesso problema, quindi ho scambiato da utilizzare contorno di usare un box-shadow:

box-shadow: 0px 0px 0px 1px #FFF; 

invece di

outline:1px #dcdcdc solid;