Internet Explorer负边距裁剪div

Question

编辑：您可以在此处查看页面：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解决问题？我已经尝试过位置：相对和缩放：1个修复。

感谢。

Answer 1

看起来.header-menu类的过滤器样式导致它隐藏在IE中，这是必要的吗？

Answer 2

我认为您使用position: relative;走在正确的轨道上，但也在其中添加z-index值（使用该值直到它正确显示）。

Answer 3

我可能会遗漏一些东西，但我仍然不明白为什么你会厌倦负面的利润。以下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;
    }
}