CSS 负上边距在 IE 8 或 9 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5506844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Negative top margin not working in IE 8 or 9
提问by SideDishStudio
I have a div with margin-top:-200px. I want the div to move up/behind the div above it.
我有一个 div margin-top:-200px。我希望 div 向上/在其上方的 div 后面移动。
Works great in all browsers except IE so far. margin-top:200pxworks, so I know it's not a collapsing margin issue.
到目前为止，在除 IE 之外的所有浏览器中都能很好地工作。margin-top:200px工作，所以我知道这不是一个崩溃的保证金问题。
Is there a bug I am not aware of here?
这里有我不知道的错误吗？
回答by biggles
IE doesn't like negative margins and doesn't render them properly. Position your elements relatively or absolutely and use top: -200pxinstead.
IE 不喜欢负边距并且不能正确呈现它们。相对或绝对定位您的元素并使用top: -200px。
Note:positioning them may change the layout significantly and you may have to rework your styles.
注意：定位它们可能会显着改变布局，您可能需要重新设计样式。
回答by Abdul Wahid
Negative margin hide the div… Here is trick use zoom:1, position: relative
负边距隐藏 div……这是使用缩放的技巧：1，位置：相对
Problem:
问题：
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}
in IE red area of toolbar div hide itself. even we are using zoom: 1. to get rid of this problem we need to add position: relative too.
在工具栏 div 的 IE 红色区域隐藏自身。即使我们正在使用 zoom: 1. 为了摆脱这个问题，我们也需要添加 position: relative 。
Solution:
解决方案：
so your css class will become
所以你的css类将成为
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}
回答by Koen van Hees
If the above doesn't help: make sure there's a div around your offending div. Now add a width of 100% to the offending div and float it to the left. Like this. Got rid of all my negative margin ie woes...
如果以上方法没有帮助：确保您的违规 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;
}
回答by user3206814
give position as relative. inline style is advisable. It may give some problem if you use external css.
给出相对位置。内联样式是可取的。如果您使用外部 css，可能会出现一些问题。
回答by hawkeye126
In order to support negative margins in IE, I've fixed similar issues with display: table;. Other fixes like zoom: 1;and position: relative;don't always work (at least in my experience). If you only want to add this style to IE, I'd suggest using https://modernizr.com/
为了支持 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; }
