IE6と7のマークアップ/ CSSの背景グラフィックの問題

Question

私はいくつかのCSSでUIの問題を抱えています。

私に問題の原因となる背景グラフィック（カーブした上端画像）を持つdivがあります。この部門の中には、見出しや一般的な内容のための他の部門がたくさんあります。

私のコードはFireFoxでは動作しますが、IE 6と7では動作しません。私はメインの背景グラフィック上で右に配置する必要がある別の背景グラフィックを持っていますが、IE6/7でこれを動作させることはできません！それはIE8で動作します

ここで私の問題を見ることができます。IEでは曲線の赤いエッジの幅がコンテンツ領域の幅を小さくします。 Firefoxの例（FF.jpg）が正しいです、コンテンツ領域は全幅です。以下

• http://www.jamesradford.net/images/IE6.jpg
• http://www.jamesradford.net/images/FF.jpg

マークアップ：以下

<div class="RedCorner"></div> 
<div class="header"></div> 
<div class="tab-content"> 

はCSS：

.RedCorner { 
    float: right; 
    background-image: url(/red_rounded.gif); 
    background-repeat: no-repeat; 
    margin-right: -25px; 
    margin-top: 1px; 
    width: 140px; 
    height: 40px; 
} 

任意の提案ですか？ いつものように多くのお礼ありがとうございます。 James

Answer 1

これはIEにdouble margin bugという名前があるためです。代わりに、絶対位置を使用してみてください、最初に確保.RedCornerの親があります。そして、

position: relative; 

：

.RedCorner { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 140px; 
    height: 40px; 
    background-image: url(/red_rounded.gif); 
    background-repeat: no-repeat; 
}