Html 使用负边距时，Chrome和Firefox/IE表现不同

我在使用负上边距时遇到问题。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>

纵队
纵队
纵队
纵队
纵队
纵队

这是我正在尝试做的一个示例图像

蓝色div是一行具有1px右边框的列。红色div的背景图像为倾斜图像（透明png）。我在红色分区上使用负边距将其向上拉，并覆盖蓝色分区的最底部边缘，以便蓝色分区中的边框与红色分区中的倾斜区域相接触（紫色区域）

我的问题是，在Firefox和IE中，内容在红色div中的位置被我应用于它的负上边距所压低。在Chrome中，这个问题并不存在。例如如果我将

边距顶部：-70px

应用于红色div，它也会将IE/FF中的内容向下推70px

---

我不知道这里发生了什么。任何帮助都将不胜感激。

我不确定这可能是什么，因为你没有发布CSS，但也许你可以重新设置默认的CSS设置。有时您需要它，因为所有浏览器都有不同的默认CSS设置。

不同的浏览器支持不同的代码。尝试编写仅在浏览器中调用的代码。例如：

    /* 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;

---

这就是检测不同的浏览器，并为每个浏览器说不同的话。我之所以使用这个示例，是因为它显示了不同的代码可以用于不同的浏览器，有时是需要的。这是我自己的一个web应用程序。

你还需要显示你的css