CSS "набросает" поведение разных поведений на Webkit & Gecko

Я работаю над экспериментом, и я узнал, что свойство "контур" CSS2 реализовано не так же на Webkit и Gecko

В script ниже, у меня есть абсолютная позиция div внутри другого div, но плавающая за ее пределами. Схема на Webkit описывает фактический родительский div во время Gecko, он расширяется, чтобы покрыть дочерний элемент.

http://jsfiddle.net/KrCs4/

Я что-то пропустил? Есть ли свойство, которое мне нужно переписать на Gecko? или его следует сообщать как ошибку?

Скриншот Webkit:

Скриншот Firefox:

EDIT:

Это подтверждено как ошибка, и вот обходной путь: http://jsfiddle.net/7Vfee/ (Вы должны убедиться, что родительский элемент позиционируется: относительный или абсолютное для этого обходного пути для работы.

Ответ 1

Это противоречивое поведение Gecko хорошо известно и достаточно адекватно документировано, хотя, как ни странно, не в MDN, а в SitePoint Reference:

Firefox вплоть до версии 3.5 включает в себя схему контуров вокруг содержимого элемента, который переполнил его границы, а не вокруг фактических установленных размеров элементов.

Это продолжает влиять на все версии Firefox. На данный момент я не вижу жизнеспособного решения этой проблемы, кроме как удалить ваш абсолютно позиционированный div из его родителя и поместить его относительно... что-то еще.

Ответ 2

У меня была такая же проблема, поэтому я поменял ее с помощью контура, чтобы использовать box-shadow:

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

вместо

outline:1px #dcdcdc solid;