使用负边距时，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>

以下是我正在尝试做的示例图片。

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

我的问题是，在Firefox和IE中，红色div中内容的位置被我应用于它的负上边距的数量压低了。在Chrome中，此问题不存在。例如。如果我将margin-top: -70px应用于红色div，它也会在IE / FF中将内容压缩70px。

我不确定这里发生了什么。任何帮助将不胜感激。

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;

这是检测不同的浏览器并为每个浏览器说不同的东西。我使用这个例子是因为它表明不同的代码可以用于不同的浏览器，有时需要它。这是我自己的一个网络应用程序。