Internet Explorer 负边距裁剪 div答案

【问题标题】：Internet Explorer negative margin clipping divInternet Explorer 负边距裁剪 div
【发布时间】：2012-01-25 16:12:15
【问题描述】：

编辑：您可以在此处查看页面：http://websitem.gazi.edu.tr/test/index.html

我正在尝试做下面截图中的效果：

第一个来自 Chrome。 Firefox 显示相同。但是从版本 7 到 9 的 Internet Explorer 显示的是第二张图片。

我的html结构是这样的：

<div class="header-menu">
    <div class="container">
        <div class="header-curve"></div>
        <div class="header-building"></div>
    </div>
</div>

我的 css 是这样的（不要打扰 LESS 特定的语法）

.header-menu {
    #gradient > .vertical(@baseColor, @baseColorDark);
    height: 82px;
    margin-top: 82px;

    .header-curve {
        background: @baseColor url(/ui/frontend/themes/default/ui/img/header-curve.png) center top no-repeat;
        height: 82px;
        margin-top: -82px;
        width: 1020px;
    }

    .header-building {
        background: url(/ui/frontend/themes/default/ui/img/header-building.png) 20px top no-repeat;
        height: 214px;
        margin-top: -82px;
        width: 1000px;
    }
}

如何解决 IE 的问题？我已经尝试过 position: relative 和 zoom:1 修复。

谢谢。

【问题讨论】：

您能解释一下为什么要使用 margin-top:-82px 吗？就我个人而言，我几乎从来不需要负边距，我很确定有更好的解决方案。
82px 是蓝色曲线的高度。有2张图片。曲线是全白色不透明的，除了从标题菜单类获得蓝色的半椭圆。另一张图片是带有白色阴影和效果的建筑物。

标签： css internet-explorer margin

【解决方案1】：

您的.header-menu 类上的过滤器样式似乎导致它隐藏在 IE 中，这是必要的吗？

【讨论】：

当我使用 IE 开发人员工具查看您的页面时，它显示了应用于 header-menu 的过滤器样式：progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5085', endColorstr='#15315b', GradientType=0)。当我禁用此样式时，它显示得很好。

【解决方案2】：

我可能遗漏了一些东西，但我仍然不明白你为什么要为负边距烦恼。下面的 CSS 会做同样的事情，不是吗？

.header-menu {
    #gradient > .vertical(@baseColor, @baseColorDark);

    .header-curve {
        background: @baseColor url(/ui/frontend/themes/default/ui/img/header-curve.png) center top no-repeat;
        height: 82px;
        width: 1020px;
    }

    .header-building {
        background: url(/ui/frontend/themes/default/ui/img/header-building.png) 20px top no-repeat;
        height: 214px;
        width: 1000px;
    }
}

【讨论】：

在这里。瘦身版：websitem.gazi.edu.tr/test/index.html

【解决方案3】：

我认为您使用 position: relative; 的方法是正确的，但还要在其中添加一个 z-index 值（使用该值直到它正确显示）。

【讨论】：