IE6 HACK & TIP, CSS TIP 링크
[태그:] ie6
IE6에서 PNG 배경이 검정색으로 나오는것 해결방법
구글링을 해보니 몇가지 방법이 나왔는데 그나마 잘 적용된 것을 적어봅니다. (현재 개발중인 사이트에 적용중)
1. CSS 파일에 다음 라인을 추가합니다.
.png24 { tmp:expression(setPng24(this)); }
2. 그리고 항상 include 하는 js 파일에 다음 라인을 추가합니다.
function setPng24(obj) {
obj.width=obj.height=1;
obj.className=obj.className.replace(/\bpng24\b/i,”);
obj.style.filter =”progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+ obj.src +”‘,sizingMethod=’image’);”
obj.src=”;
return ”;
}
obj.width=obj.height=1;
obj.className=obj.className.replace(/\bpng24\b/i,”);
obj.style.filter =”progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+ obj.src +”‘,sizingMethod=’image’);”
obj.src=”;
return ”;
}
3. 이미지 태그에 다음과 같이 삽입합니다.
<img src=”이미지경로/img.png” class=”png24″>
그러면 IE6에서 배경이 검게 나오던 png 파일이 제대로 표시됩니다.
단, background 에는 적용이 안됩니다. gif로 바꿔야 합니다.
구글링하다보니 background에도 적용되는게 있긴 했는데 좀 복잡했고 적용하기가 힘들어서
위의 것으로 대체했습니다.
도움이 되시길…
[펌] 개발자들을 살려주세요!
저도 개발자라 IE6 때문에 정말 치를 떨었던 기억이 있어서 개발자를 살려주세요! 운동에 동참합니다.
얼마전 새 사이트 개발하던중에 FF3.0과 IE7에 맞춰 개발을 하던중 IE6 에서 이상하게 나온다는 이야기에
IE-TESTER(ie5.5부터 ie7까지 탭별로 열어서 테스트할 수 있는 브라우저툴)를 설치하고 봤더니
css 틀어지는 것부터 png파일을 제대로 처리 못해서 ie6에서는 배경이 시커멓게 나오고 구글링 끝에
css와 자바스크립트로 해결을 했는데 백그라운드에 적용된 png는 그나마도 안되서 다시 gif로 교체.
현재 1차 개발이 완료된 상태인데 결국 시간때문에 FF 버렸습니다. T.T
IE6(IE7도 거의 맞더군요)에 맞춰 개발을 하고 추후에 FF를 적용하기로 했습니다. 이런 식으로 타협을 하면
안되는데 도저히 시간을 맞출 수가 없어서….
IE7만 해도 봐줄만 한데 IE6은 정말 안습입니다.
IE-TESTER 다운로드 http://www.my-debugbar.com/wiki/IETester/HomePage
왜 IE6가 절대로 피해야만 하는 브라우저인지는 우리 모두 잘 알고있으시리라 믿겠습니다. -ㅅ-;;
암튼, 드디어 몇달만에 제가 보낸 번역이 사이트에 올라온 김에 수정된 플러그인을 배포해봅니다. 원래 조영운님이 텍스트큐브용으로 제작하신 플러그인에서 한국어로 번역한 이미지를 추가하고 링크도 한국어 페이지로 바꿨습니다. 이걸로 이제 더 많은 한국 블로거들이 이 캠페인에 참여했으면 좋겠네요.
자, 그럼 전세계 네티즌이 IE6를 버리는 그날까지! 🙂
얼마전 새 사이트 개발하던중에 FF3.0과 IE7에 맞춰 개발을 하던중 IE6 에서 이상하게 나온다는 이야기에
IE-TESTER(ie5.5부터 ie7까지 탭별로 열어서 테스트할 수 있는 브라우저툴)를 설치하고 봤더니
css 틀어지는 것부터 png파일을 제대로 처리 못해서 ie6에서는 배경이 시커멓게 나오고 구글링 끝에
css와 자바스크립트로 해결을 했는데 백그라운드에 적용된 png는 그나마도 안되서 다시 gif로 교체.
현재 1차 개발이 완료된 상태인데 결국 시간때문에 FF 버렸습니다. T.T
IE6(IE7도 거의 맞더군요)에 맞춰 개발을 하고 추후에 FF를 적용하기로 했습니다. 이런 식으로 타협을 하면
안되는데 도저히 시간을 맞출 수가 없어서….
IE7만 해도 봐줄만 한데 IE6은 정말 안습입니다.
IE-TESTER 다운로드 http://www.my-debugbar.com/wiki/IETester/HomePage
http://www.xenosium.com 에서 퍼온 글입니다.
전에 들어보셨을 수도 있는 Save The Developers (개발자들을 살려주세요!) 캠페인의 텍스트큐브용 플러그인입니다. 이걸 달면 단순하게, 인터넷 익스플로러 (IE6) 에서 블로그를 방문했을때 오른쪽 위 모서리에서 작은 그림이 떠서 브라우저를 업그레이드하라고 알려줍니다.
전에 들어보셨을 수도 있는 Save The Developers (개발자들을 살려주세요!) 캠페인의 텍스트큐브용 플러그인입니다. 이걸 달면 단순하게, 인터넷 익스플로러 (IE6) 에서 블로그를 방문했을때 오른쪽 위 모서리에서 작은 그림이 떠서 브라우저를 업그레이드하라고 알려줍니다.
요런 그림.
왜 IE6가 절대로 피해야만 하는 브라우저인지는 우리 모두 잘 알고있으시리라 믿겠습니다. -ㅅ-;;
암튼, 드디어 몇달만에 제가 보낸 번역이 사이트에 올라온 김에 수정된 플러그인을 배포해봅니다. 원래 조영운님이 텍스트큐브용으로 제작하신 플러그인에서 한국어로 번역한 이미지를 추가하고 링크도 한국어 페이지로 바꿨습니다. 이걸로 이제 더 많은 한국 블로거들이 이 캠페인에 참여했으면 좋겠네요.
다운로드: 다운로드는 http://www.xenosium.com/132 에서..
설치방법:
압축을 푸신 후에 들어있는 “SayNoToIE6” 폴더를 블로그 서버의 Plugins 폴더에 복사해주신 후 텍스트큐브 관리자의 플러그인 메뉴에서 활성화시키면 됩니다.자, 그럼 전세계 네티즌이 IE6를 버리는 그날까지! 🙂
익스플로러 6(Internet Explorer 6)에서 PNG의 알파채널 사용하기(투명)
한때 GIF파일을 웹에서 자주 사용했었다.
바로 투명(transparency)을 지원했기 때문이다.
그런데 저작권과 관련하여 여기저기에서 말들이 많이 나와 PNG라는 새로운 형식이 나왔다.
반갑게도 점차 많은 웹편집기에서 사용하는 이미지로 jpg, gif 외에 png를 지원하고 있다.
알파채널이 포함된 png24 형식은 모질라 파이어폭스에서는 제대로 보이는데 인터넷익스플로러에서는 불투명하게 보여 사용자의 의도대로 웹에 보이지 않는다. 익스플로러7에서는 제대로 보인다고 한다.
익스플로러5나 익스플로러6에서도 제대로 보이게 하는 방법이다.
1. <head>와 </head>사이에 다음 스크립트를 삽입한다.
[code]
<script language=”javascript”>
<!–
function setPng24(obj) {
obj.width=obj.height=1;
obj.className=obj.className.replace(/\bpng24\b/i,”);
obj.style.filter =
“progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+ obj.src +”‘,sizingMethod=’image’);”
obj.src=”;
return ”;
}
//–>
</script>
[/code]
2. <head>와 </head> 사이에 다음의 스타일을
[code]
<style type=”text/css”>
.png24 {
tmp:expression(setPng24(this));
}
</style>
[/code]
3. 표시하고자 하는 png 이미지의 링크에 다음을 추가한다.
<img src=”./images/dap_100.png” class=”png24″>
[/code]