负上边距在 IE 8 或 9 中不起作用答案

【问题标题】：Negative top margin not working in IE 8 or 9负上边距在 IE 8 或 9 中不起作用
【发布时间】：2016-05-27 19:03:01
【问题描述】：

我有一个带有 margin-top:-200px 的 div。我希望 div 向上/在其上方的 div 后面移动。

目前在除 IE 之外的所有浏览器中都运行良好。 margin-top:200px 有效，所以我知道这不是保证金问题。

这里有我不知道的错误吗？

【问题讨论】：

使用绝对位置和z-index怎么样？
你能显示一些代码吗？最好是jsFiddle 测试用例。

标签： css internet-explorer

【解决方案1】：

IE 不喜欢负边距并且不能正确呈现它们。相对或绝对定位您的元素，并改用top: -200px。

注意：放置它们可能会显着改变布局，您可能需要重新设计样式。

【讨论】：

如果没有看到他的具体案例，很难判断。
是的，但我过去遇到过很多问题，即 IE 无法正确读取负边距。尝试而不是使用它们来定位元素是一个好习惯。
很公平...我已经实现了相对定位，这迫使我在底部使用负边距来拉起下面的内容。我只是希望了解为什么负边距在顶部不起作用。我想这对 IE 来说太过分了 :) 抱歉，我无法提供更多代码，但它相对复杂，我希望能发现一个常见的问题/解决方案。
@SideDishStudio：您的问题的问题是“顶部的负边距”在 IE8/9 中起作用（请参阅：jsfiddle.net/ERZhS）。所以没有足够的信息来给出一个好的答案。
在尝试将 div 放置在图像上时遇到了同样的问题。尝试了一个多小时的解决方案，终于找到了这篇文章。更改为 position: relative 在 IE 条件下，它就像一个魅力。谢谢！

【解决方案2】：

负边距隐藏 div… 这是诀窍使用缩放：1，位置：相对

问题：

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}

在 IE 工具栏 div 的红色区域隐藏自身。即使我们使用缩放：1. 为了摆脱这个问题，我们也需要添加 position: relative。

解决方案：

这样你的 css 类就会变成

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}

http://trickyclicks.com

【讨论】：

为了工作，我将display: inline-block; 添加到内部元素（本例中为.toolbar）

【解决方案3】：

如果上述方法没有帮助：确保有问题的 div 周围有一个 div。现在将 100% 的宽度添加到有问题的 div 并将其浮动到左侧。像这样。摆脱了我所有的负边距，即麻烦......

div.container {}
div.offender /*inside div.container*/ {
  width: 100%;
  float: left;
  margin-bottom: -20px;   /* ie fix */
  zoom: 1;                /* ie fix */
  position: relative;     /* ie fix */
  display: block;
}

【讨论】：

【解决方案4】：

给出相对位置。建议使用内联样式。如果您使用外部 css，可能会出现一些问题。

【讨论】：

【解决方案5】：

为了支持 IE 中的负边距，我已经修复了 display: table; 的类似问题。 zoom: 1; 和 position: relative; 等其他修复程序并不总是有效（至少在我的经验中）。如果你只想将这种样式添加到 IE，我建议使用https://modernizr.com/

// using comment to show that .no-cssreflections belongs to the html tag
/*html*/.no-cssreflections .container { display: table; }

【讨论】：

display: table; 在父母身边 <div> 对我有用