Chrome 和 Firefox/IE 在使用负边距时表现不同答案

【问题标题】：Chrome and Firefox/IE behaving differently when using negative marginsChrome 和 Firefox/IE 在使用负边距时表现不同
【发布时间】：2013-12-09 14:27:33
【问题描述】：

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

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

【问题讨论】：

你也需要展示你的css

标签： html css internet-explorer google-chrome firefox

【解决方案1】：

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

【讨论】：

【解决方案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;

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

【讨论】：