Internet Explorerの負のマージンクリッピングのdiv

Question

EDIT：あなたはこちらのページを表示することができます：http://websitem.gazi.edu.tr/test/index.html

を、私は下のスクリーンショットで効果をやろうとしている：

最初の1から提示されましたクロム。 Firefoxは同じように表示されます。しかし、バージョン7から9までのInternet Explorerは2番目の画像を示しています。

私のHTML構造はこれです：

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

そして、私のCSSはどのように私はIEの問題を解決することができ、この（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; 
    } 
} 

のですか？私はすでに位置を試しました：相対的なとズーム：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; 
    } 
}