IMG 태그에서 IE 6에서 작동하도록 투명한 PNG

StackOverflow https://stackoverflow.com/questions/1024644

  •  06-07-2019
  •  | 
  •  

문제

IE 6에서는 작동하지 않는 투명한 배경을 가진 PNG가 있습니다. DIV로 해당 이미지를 사용하여 몇 가지 IMG 태그를 대체하여 사용하는 CSS에서 문제를 해결했습니다.

#div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png")}

내가 이것과 관련된 문제는 사이트에 매우 액세스 할 수없는 ALT 및 타이틀 속성을 잃는다는 것입니다. IMG 태그와 함께 위의 CSS를 사용하면 올바른 이미지가 표시되지만 이미지를 표시 할 수 없을 때 표시하는 큰 'X'가 있습니다.

IMG 태그에서 투명성을 올바르게 표시함으로써 IE가 행동 할 수있는 방법에 대한 제안이 있습니까?

도움이 되었습니까?

해결책

DIV 태그를 계속 사용할 수 있지만 여전히 액세스 할 수있는 한 가지 방법은 DIV 요소 내에 두 번째 스팬 태그를 배치하고 ALT의 값을 그 안에 넣은 다음 페이지에서 벗어나지 않도록 스타일을 지정하는 것입니다. ...

div.image {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png");
}

div.image span {
    position : absolute;
    top : -9999px;
}

그러면 HTML은 이렇게 보일 것입니다 ...

<div class="image" title="The title for the image" >
    <span>The ALT Text</span>
</div>

제목 태그는 여전히 DIV에서 작동하므로 해당 부분에서 괜찮을 것입니다.

나는 당신이 단순히 텍스트를 숨길 수 있다고 생각하지 않습니다 (표시 : 없음;) 스크린 리더가 그 규칙을 존중할 것이라고 생각하기 때문입니다 (읽지 않은 것처럼).

다른 팁

JavaScript를 사용하여 IE6에서 투명성을 가능하게 할 수 있습니다. 당신이 찾을 수있는 많은 예가 있습니다. 여기 내가 사용한 링크가 있습니다.

http://jquery.andreaseberhard.de/pngfix/

또 다른 옵션은 IE6 용 HTC를 사용하는 것입니다. 솔루션은 여기를 참조하십시오.

http://www.twinhelix.com/css/iepngfix/

CSS 파일에 추가 라인 만 추가해야합니다. 죄송합니다. 여전히 JavaScript가 필요할 수 있습니다.

나는 두 달 전에이 문제를 해결하기 위해 작은 JavaScript 도구를 사용했습니다. 이름이 지정되었습니다 단위 PNG 수정 그리고 사용하기가 매우 쉽습니다.

여기에 누군가가이를 위해 JS 구현을 제공했지만이 솔루션은 FF 및 기타 브라우저에서도 실행됩니다. 예를 들어 MS 기술을 사용하는 것과 같은 더 나은 아이디어가 있습니다 :)

그들 중 하나는 HTC (실수하지 않으면 하이퍼 텍스트 구성 요소)라는 것을 사용합니다. 그것은 ... 행동을위한 CSS와 같은 것입니다. CSS 선택기에 일부 기능을 첨부 할 수있는 XML 파일입니다. 다시, MS 유일한 기술.

요컨대,이 사이트를 방문하십시오.http://www.twinhelix.com/css/iepngfix/

나는 이것을 Drupal 모듈과 함께 사용하고 있으며 매우 행복합니다. 궁금하다면 이것은 모듈입니다. http://drupal.org/project/pngbehave

참고 : 이것은 IE 테스터 하에서 작동하지 않습니다. http://www.my-debugbar.com/wiki/ietester/homepage IE6 사이트를 테스트하기 위해 IE6 (알아야 할 경우 VMware에서 실행)이있는 Windows 2000을 사용하고 있습니다.

IE6은 PNG-8 투명성을 지원하지만 PNG-24는 아닙니다. IE6을 "고정"하는 내가 가장 좋아하는 도구 중 하나는 ie8.js.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top