【问题标题】: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> 对我有用
      猜你喜欢
      • 2012-12-04
      • 2012-09-20
      • 2012-09-12
      • 2011-07-29
      • 2012-12-28
      • 2015-12-13
      • 1970-01-01
      • 2015-08-01
      • 2012-03-07
      相关资源
      最近更新 更多