Странное поведение с CSS margin в Firefox

Что-то странное происходит с настройкой поля в Firefox, у меня есть div с идентификатором "wrap" с верхним полем 20px, когда пользователь входит в систему, над div появляется div с идентификатором user_nav. Я не нужно любое поле над этим div, но Firefox по какой-то неизвестной причине распространяет верхнее поле, которое у меня есть на обернутом div, на div user_nav над ним, этого не происходит ни в каких других браузерах.

Если я удалю верхнее поле из обертки div, оно будет удалено из обоих.

Я могу избавиться от этого, задав блоку user_nav отрицательное верхнее поле, но это портит все остальные браузеры.

div#user_nav {
width: 980px;
margin: 0 auto;
}


div#wrap {
width: 980px;
margin: 20px auto 30px auto;
}

Есть идеи о том, что происходит?

Спасибо

Роб Фенвик


css firefox margins
person Rob Fenwick    schedule 28.04.2013    source источник
comment
Можете ли вы поместить свой код в jsFiddle?   -  person Jason Yaraghi    schedule 29.04.2013
comment
Было бы очень полезно увидеть ваш html. Как сказал @Adrift, jsFiddle it up!   -  person Jeffpowrs    schedule 29.04.2013
comment
Я не знаком с jsFiddle, поэтому надеюсь, что это то, что вам нужно jsfiddle.net/69aD9 есть весь код только html и css, но вы можете увидеть поведение в Firefox Спасибо   -  person Rob Fenwick    schedule 29.04.2013

Ответы (1)


arrow_upward
1
arrow_downward

Это действительно причудливое поведение - и, похоже, это один из эффектов этой старой ошибки, связанной с очисткой элементов блока (или одним из многих, многих ее дубликатов):

https://bugzilla.mozilla.org/show_bug.cgi?id=451791

Один из способов обойти это — избавиться от <div class="clear"> и использовать вместо этого метод очистки с переполнением (хотя это не всегда возможно, например, — очевидно — если у вас есть содержимое внутри очищенного элемента, которое будет выходить за пределы Это):

http://www.quirksmode.org/css/clearing.html

То есть, удалите <div class="clear"> внутри user_nav_frame и примените к нему overflow: hidden (и width: 100%) в CSS, чтобы очистить поплавки:

div#user_nav_frame {
    background-color: #0A4D84;
    overflow: hidden;
    width: 100%;
}

JSFiddle: http://jsfiddle.net/69aD9/2/

Есть и контрхаки, если в вашем случае это не сработает. См. приведенный выше отчет об ошибке.

person JimmiTh    schedule 28.04.2013