투명 PNG 관련 IE6 문제

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

문제

브라우저 간 방식으로 알파 트랜스 PNG를 사용하고 싶거나 필요하다면 div에서 배경 이미지를 사용한 다음 IE6 전용 CSS에서 배경을 " none"을 선택하고 적절한 "filter" 인수를 포함합니다.

다른 방법이 있나요?더 좋은 방법이 있나요?배경 이미지가 아닌 img 태그를 사용하여 이를 수행할 수 있는 방법이 있습니까?

도움이 되었습니까?

해결책

결론은 PNG에서 알파 투명성을 원하고 IE6에서 작동하기를 원한다면 Alphaimageloader 필터를 적용해야한다는 것입니다.

이제 브라우저 특정 해킹, 조건부 의견, JavaScript/JQuery/JlibraryOfChoice 요소 반복, 사용자 기관-스니핑을 통한 서버 측 CSS-Serving ...

그러나 모든 'EM은 필터를 적용하고 배경을 제거하도록합니다.

다른 팁

JavaScript (jQuery)를 사용하는 특정 솔루션은 다음과 같습니다.

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

기존 사이트에 추가하기 쉽고 모든 이미지 (형태 버튼, 배경, 일반 IMG 태그 등)를 처리하고 CSS를 멋지고 깨끗하게합니다.

그것은 아마도 "최고의"방법 일 가능성이 높습니다. 그러나 PNG 파일과 관련하여 IE6이 제대로 구현되지 않는 것은 알파 트랜스만이 아니라는 점을 명심하십시오. IE가 감마를 제대로 구현하지 않아 색상 공간이 손상되므로 PNG 파일은 종종 "어두운"것보다 "어두운"을 보여줍니다.
최근 프로젝트에서 구현 한 한 가지 대안 "솔루션"은 모든 PNG 이미지를 "TOGIF"클래스로 표시하는 것이 었습니다. CSS에서 사용자 정의 동작 .htc가 호출되어 .png 확장을 .gif로 변경하여 브라우저가. 우리가 문제로 표시 한 것으로 감지되었습니다. 우리는 단지 같은 경로에 모든 PNG의 GIF 버전을 포함하고 브라우저가 PNG를 제대로 처리하지 않는 것으로 판명되면 GIF 버전의 이미지로 교환합니다. 그러므로 우리는 보장 된 완전한 투명성과 색상 정확도를 위해 알파 블렌딩을 희생하고, 아마도 그것이 바로 바로 보이지 않을 것임을 알 때만 그렇게합니다.
이상적인 솔루션은 아니지만 내가 생각하는 크로스 브라우저의 본질입니다.
편집 : 실제로 문제의 프로젝트를 살펴보면 "Alpha"라는 IMG 클래스에 .htc 동작을 사용하여 이미지의 올바른 필터를 자동으로 던졌습니다. 따라서 IE6 전용 순수 CSS 해킹 대신 JavaScript를 사용하여 브라우저를 감지하므로 조금 더 우아 할 수 있지만 기본적으로 동일합니다.
DHTML 동작을 작성하는 방법에 대한 소개를 보려면 시도하십시오. 이 링크.

이미지 로더는 IE6에서 사용할 수 있는 유일한 수정 사항입니다.PNG 지원은 IE7과 함께 매우 초보적이며 반복되는 투명 배경을 올바르게 처리할 수 없습니다.나는 투명한 컨테이너로 웹사이트를 디자인하려고 할 때 이것을 힘들게 배웠습니다.물론 Firefox에서는 완벽하게 작동했습니다.

작은 배경 영역과 투명한 전경 그래픽에는 문제가 없지만 Internet Explorer에서 많은 양의 투명도를 사용하는 웹 사이트를 디자인하는 것은 권장하지 않습니다.

결국 내 해결책은 IE에서는 평면 색상을 표시하고 다른 브라우저에서는 투명도를 유지하는 것이었습니다.다행히도 결국 디자인이 크게 손상되지는 않았습니다.

이 주위의 또 다른 방법은 GIF와 투명한 PNG와 같은 2 개의 별도 이미지를 사용하고 CSS를 대상으로하는 것입니다.

/* for IE 6 */
#banner {
    background:url(../images/banner.gif);
}

/* for other browsers */
html > #banner {
    background:url(../images/banner.png);
}

IE 6은 CSS Child Selectors를 이해하지 못하므로 규칙을 무시할 것입니다. 반면, 이해하는 브라우저는 당신에게 멋진 투명 PNG를 줄 것입니다.

유일한 단점은 두 개의 별도 이미지가 있어야하고 디자인이 보이지 않을 수 있다는 것입니다. 바로 그거죠 같은 크로스 브라우저이지만 부러지지 않는 한 괜찮을 것입니다.

다음은 Alphaimageloader 필터를 사용하지 않는 두 가지 옵션입니다.

나를 위해. IE6 친화적 인 팔레트를 .png에 추가하는 불꽃 놀이.

IMG 요소에 대한 일반적인 솔루션은 SRC를 1x1 픽셀 투명 GIF를 가리키고 동일한 필터 해킹을 사용하는 것입니다.

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