IE7, CSS3, 배경 이미지 및 비율

Question

좋아, 여기 내 문제가있다. Lightbox (이 경우 slimbox2)를 사용하는 클라이언트의 경우 이미지가 화면 크기보다 큰 경우 이미지의 최대 너비/높이가 화면 크기 자체가되도록 내용을 수정했습니다. 그래서 다른 말로

: 나는 대부분의 브라우저 CSS3 배경-size 속성을 사용하고 이미지> 화면 크기 => 이미지 == 화면 크기

경우는 작품이 잘 느릅 나무. 그리고 IE5.5 +에 대해 필터를 사용하고 있습니다 : AlphaImageLoader.

이 모든 것이 좋지만 이미지 위에 마우스를 올려 놓으면 다음 및 이전 버튼을 가져야합니다. 이것은 IE7에서 작동하지 않습니다. 에는 CSS 필터가 있기 때문에 버튼이 배경 이미지 아래에있는 것처럼 보입니다. AlphaImageLoader이 위에 있습니다. 버튼을 표시 할 수있는 방법이 있습니까? 여기

 $bgsize = preload.width +'px '+preload.height +'px'; 
     $(image).css({backgroundImage: "url(" + activeURL + ")", 
          visibility: "hidden", 
          display: "block", 
          'background-size':$bgsize, 
          '-webkit-background-size':$bgsize, 
    'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ activeURL+'\',sizingMethod=\'scale\')', 
'-ms-filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ activeURL+'\',sizingMethod=\'scale\' 

을 CSS이다 :

여기 (JQUERY은 PHP 병합) 내 코드 조각이다

#lbImage { 
    position: absolute; 
    left: 0; 
    top: 0; 
    background-repeat: no-repeat; 
} 

#lbPrevLink, #lbNextLink { 
    display: block; 
    position: absolute; 
    top: 0; 
    right:-10px; 
    width: 50%; 
    outline: none; 
} 

#lbPrevLink { 
    left: 0; 
} 

#lbPrevLink:hover { 
    background: url(prevlabel.jpg) no-repeat 0 15%; 
} 

#lbNextLink { 
    right: 0; 
     z-index:20000; 
} 

#lbNextLink:hover { 
    background: transparent url(nextlabel.jpg) no-repeat 100% 15%; 
} 

PS : Z- 색인 같은 일반적인 솔루션을 시도 상대적/절대 위치 지정.

Answer 1

AlphaImageLoader는 객체 backgro und 및 내용이므로 아래의 모든 내용은 obscured입니다. 대안으로 background-size shim 또는 pure CSS lightbox을 사용하십시오.