IE6 및 7의 마크 업/CSS 배경 그래픽 문제

Question

일부 CSS에 UI 문제가있어 도움을 받기를 바랍니다.

문제가되는 배경 그래픽 (곡선 상단 가장자리 이미지)이있는 div가 있습니다. 이 div 안에는 제목과 일반 내용에 대한 다른 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; 
}