Странные Firefox отрицательные поля

Question

Я обнаружил странную ошибку в Firefox 4.0.1 (она также произошла в Opera 11.5), поэтому я создал этот пример, чтобы показать проблему:

http://jsfiddle.net/whYC7/

Если смотреть в сафари, все выглядит нормально, но когда я открываю его в Firefox или Opera, изображение внутри div с отрицательным полем все еще занимает место в div под ним.

Кто-нибудь знает способ исправить это?

Answer 1

Это правильный рендеринг согласно спецификации CSS. Отрицательное поле означает, что вершина красного div выше, чем это было бы в противном случае, но как только вы определите, где находится его верхняя часть, положение текста зависит только от пересечения с плавающей точкой и div. См. http://www.w3.org/TR/CSS21/visuren.html#floats абзац, начинающийся с «Линия рядом с плавающей точкой».

Вы можете отправить сообщение об ошибке в WebKit здесь.

Answer 2

Исправление, которое может работать в большинстве случаев, состоит в том, чтобы сделать позицию вашего div абсолютной, а затем использовать верхнюю / левую / правую / нижнюю позицию для управления положением

Answer 3

Я столкнулся с этой проблемой также в FF и IE9 ... абсолютный позиционный div не распознает отрицательные поля, хотя использование top: 100px вместо margin-top: -100px, похоже, работает в FF 12и то есть 9