Chrome и Firefox/IE ведут себя по-разному при использовании отрицательных полей

Question

У меня проблема при использовании отрицательного верхнего поля. Firefox и IE отличаются от Chrome.

У меня есть макет, подобный следующему.

Вот основная структура моего HTML

<div class="blue"> 
    <div class="column">Column</div> 
    <div class="column">Column</div> 
    <div class="column">Column</div> 
    <div class="column">Column</div> 
</div> 
<div class="red"> 
    <div class="column">Column</div> 
    <div class="column">Column</div> 
</div> 

А вот пример изображения того, что я пытаюсь сделать.

Синий ДИВ находится ряд колонн с 1px правой границы. Красный div имеет наклонное изображение для фонового изображения (прозрачный png). Я использую отрицательный запас на красном div, чтобы потянуть его вверх и закрыть самый нижний край синего div, чтобы границы в синем div касались наклонной области в красном div. (фиолетовая область)

Моя проблема в том, что в Firefox и IE позиция содержимого в красном div нажимается на величину отрицательного верхнего поля, к которому я обращаюсь. В Chrome эта проблема не существует. Например. Если я применил margin-top: -70px к красному div, он также подтолкнет содержимое вниз на 70 пикселей в IE/FF.

Я не уверен, что здесь происходит. Любая помощь будет оценена по достоинству.

Answer 1

Я не уверен, что это могло быть, потому что вы не опубликовали свой CSS, но, возможно, вы могли бы Reset CSS сбросить настройки CSS по умолчанию. Иногда вам это нужно, потому что у всех браузеров разные настройки CSS по умолчанию.

Answer 2

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

/* Configure the animation for Firefox */ 
-moz-animation-duration:6s; 
-moz-animation-name:spin; 
-moz-animation-timing-function:linear; 

/* Configure it for Chrome and Safari */ 
-webkit-animation-duration:6s; 
-webkit-animation-name:spin; 
-webkit-animation-timing-function:linear; 

Это определяет различные браузеры и говорит разные вещи для каждого. Я использовал этот пример, потому что он показывает, что другой код может использоваться для разных браузеров, а иногда и нужен. Это одно из моих собственных веб-приложений.