CSS: неожиданный отступ / отступ в Firefox 4 CSS

Question

Я недавно начал настраивать веб-сайт и столкнулся с проблемой в Firefox 4. У моей главной панели навигации неожиданно появилось поле в верхней части страницы.- Только в Firefox 4. Отлично работают Chrome, IE8, IE9, IE7, Safari.Кажется, только FF4 ошибается.Как я могу решить это элегантно, не загромождая мою CSS cf хаки?

Спасибо за ваш адив:

URL для живого демо: http://www.creativeworkx.at

Answer 1

Поле 2em из #main-wrap div вызывает его.

Добавление margin-top: -2em к вашим #doc исправлениям div.

Answer 2

Я разработал простой тест для вашего случая:

<div style="float:left;">test</div><div style="margin-top: 50px;"></div>

Примечание: Настройка margin-bottom вместо margin-top действует аналогично, но может быть решена путем добавления содержимогово вторую DIV

Это показывает, что это своего рода сложная проблема float, которая вызывает неожиданный рендеринг.

Этот неожиданный рендеринг даже появляется в браузере, кроме Firefox, например, Chrome.

---

Однако недавно я нашел быстрое, но не формальное решение для непредсказуемого решения интересующей вас проблемы.

Просто добавьте текст, независимо от того, пустая строка или   послеменю, первый DIV или перед DIV с полями.

Вы можете заключить текст в элемент со свойством нулевой высоты и отображать блок.

Как:

<div style="height:0">&nbsp;</div>

Проблема будет выглядеть решенной с помощью этого трюка.: -)

Получайте удовольствие от написания CSS.: -)

Answer 3

Этот CSS - плохой парень:

#main-wrap {
    margin: 2em auto auto;
}