標記/ CSS與IE6和7的背景圖形問題

Question

我有一些CSS，我希望得到一些幫助與用戶界面的問題。

我有一個div有背景圖形（彎曲的頂部邊緣圖像），這是導致我一個問題。在這個div中，我有很多其他的div用於標題和一般內容。

我的代碼在FireFox中工作，但不在IE 6和7中。我有另一個背景圖形，我需要在主背景圖形上放置右側，但Im無法在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; 
}