본문 바로가기

css관련기록

ie6 png

추가 태그

 <script src="png.js" type="text/livescript"></script>
 <!--[if IE 6]><script src="iePNG.js"></script><![endif]-->

ie6

파이어폭스

 web Developer를 통해서 경고 안 뜨는거 확인

 

iePNG.zip

 

 

------------------------------------------------------------------------------------------

방법1 : -------------------------------------------------------------------------------------------------------------
<style type="text/css">
.png24 { tmp:expression(setPng24(this)); }
</style>

<script>
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>

<table>
<tr>
<td bgcolor="blue"><img src=left.png class="png24"></td>
</tr>
</table>


방법2 -------------------------------------------------------------------------------------------------------
참조 : http://naradesign.net/wp/2006/12/15/100/



1. img 로 불러올 때

css에서
.png24 {
    tmp
:expression(setPng24(this));
}


이렇게 선언하고

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 '';
}


이렇게 선언해 준 후에 사용하는 이미지에 class="png24"를 삽입.
BUT - 페이지를 한 번더 호출하는 경우가 발생 -_-;


2. background-image로 불러올 때

background: url(../images/asdf.png) no-repeat center top;
//CSS문서 위치를 중심으로 이미지 경로를 따질것

background
-image : none;
filter
: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/asdf.png',sizingMethod='scale');
//실제 읽어들이는 페이지를 중심으로 이미지 경로를 따질것



출처 : http://forum.standardmag.org


특수한 경우
필터 먹은 DIV 안에 있는 링크를 아무리 눌러도
클릭이 되지 않는 현상이 생깁니다. (IE-_-신발)

이 특수한 경우는 다음과 같습니다.

필터먹인 DIV
div {
   position
: relative;
  
// offset 설정이 되어버리는 순간 (absolute 마찬가지)
}


위와 같이 필터먹인 DIV에
position: relative, absolute 설정을 주면
안에 있는 링크는 무용지물이 되고 맙니다.

해결방법
1. 필터 먹인 DIV에는 position: static;
2. 그 안에 들어있는 링크(a)에 relative 혹은 absolute 를 주세요.