CSS „Zarys” różne zachowanie zachowanie na Webkit & Gecko

Question

pracuję na zasadzie eksperymentu & I okazało się, że „Zarys” własność CSS2 nie jest realizowany w ten sam sposób na Webkit & Gecko

W poniższym skrypcie Mam absolutny div pozycji wewnątrz innego div, ale pływający poza nim. Zarys na Webkicie określa rzeczywisty div dla rodziców, podczas gdy na Gecko, rozszerza się, aby pokryć element potomny.

http://jsfiddle.net/KrCs4/

Am I brakuje czegoś? Czy istnieje właściwość, którą muszę nadpisać w Gecko? lub powinien zostać zgłoszony jako błąd?

Webkit Zrzut ekranu:

Firefox Zrzut ekranu:

EDIT:

Potwierdza to być błąd, a tutaj jest obejście: http://jsfiddle.net/7Vfee/ (trzeba upewnij się, że rodzic jest ustawiony: względny lub bezwzględny dla t jego obejście do pracy.

Answer 1

to niespójne zachowanie Gecko jest dobrze znane i dość odpowiednio udokumentowane, choć dziwnie nie na MDN ale na SitePoint Reference:

Firefox włącznie wersji 3.5 będzie narysować kontur kontur wokół treści element, który przekroczył granice, a nie wokół rzeczywistych ustawionych wymiarów elementu.

Dotyczy to wszystkich wersji Firefoksa. Obecnie nie widzę możliwości obejścia tego problemu, poza usunięciem absolutnie umieszczonego div z jego obiektu nadrzędnego i umieszczenie go względem ... czegoś innego.

Answer 2

miałem ten sam problem, więc zamieniłem go z użyciem zarys użyć box-shadow:

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

zamiast

outline:1px #dcdcdc solid;