为什么在IE 7中负边距无效？

Question

为什么在IE 7中负边距无效？

4

我在链接上声明了负边距，但在IE 7上无效。

#search a {
    color: #E5E5E5;
    text-decoration: none;
    font-weight: bold;
    float:right;
    margin-top:-20px; // this is not working on ie, only mozilla
}

这个问题有解决方案吗？

- pingpong

1

`<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">` - pingpong

可能是文档类型不兼容，再加上没有设置 display: block（即使你对其进行浮动，IE也不会为没有明确设置 display: block 的元素提供布局）。 - corroded

我尝试了display:block，但还没有生效 :(( - pingpong

你能否在 JSFiddle 上展示一下你的问题？ - corroded

我以为你在其中添加了display: block？http://jsfiddle.net/ZFJyy/4/ - corroded

显示剩余2条评论

3个回答

1

设置位置：相对；这是一个使用负边距的好指南http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

- omabena

它对我来说确实有效，请查看http://omar.happypunkpanda.com/stack/negative-left.html，我向body容器添加了边框，这样您就可以看到左侧的-30px。 - omabena

哇，你甚至修复了文本输入问题，能否展示一下你具体改了什么呢？谢谢，我有点慢！ - pingpong

我没有改变任何东西，你可以检查代码，我基本上只是添加了一个容器，请确认你正在重置元素，或者可能样式被覆盖了，如果你把整个代码放上来，我也许能帮你解决问题。祝好运！ - omabena

1

请确保设置有效的文档类型。怪异模式不允许负边距。

- dtbarne

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Faust · Accepted Answer

{position: relative;} 可能是必需的，正如已经提到的那样，但你可能还有另一个问题：

通常情况下，如果使用负边距技术将元素拉出来，IE7 将不会绘制超出其父容器的部分（尽管它会尊重其他实现突出效果的方式，比如 {overflow: visible}）。

这是与 "hasLayout" 相关的 IE bug，详细处理方法可以在 "Has Layout: Negative Margin Bug" 中找到。

正如上述参考文献所述，有一些方法可以诱使 IE7 绘制具有负边距的元素，但它涉及 "... 不使用任何给元素布局的属性"，这可能限制您想使用的其他设计技术，并且具有其他副作用（再次参见引用文献）。

但是回答您的问题：要解决此问题，请查看导致 "hasLayout" 的属性列表（比如 position、height 和 width - 哎呀！），并确保没有应用于您的容器。