좌충우돌 웹퍼블리셔 일기

아무 이유 없이...ie6/ie7에서 이미지 위에 간격이 1px 벌어지는 현상...vertical-align:top; line-height:0; 으로 해결.

line-height:0; 이게 빠지면 ie7은 여전....결국 둘다 써줘야 되더라...

• vertical-align:top; >> 이건 이미지에
• line-height:0; >> 이건 이미지 들어있는 박스태그에~

이제까지 png 이미지를 사용하면서 여러가지 방법을 썼었는데 모두 만족스럽지 않은 결과를 가져왔다. 결론은 png를 사용하지 않게끔 디자인을 하던가...ie6이 없어지던가....둘중 하나인가....orz...

눙물이....ㅠ.ㅠ
유레카!!! 5번~!!!!!

1. 스크립트 사용1 ( 백그라운드 사용 불가/ ie8 에서 작은 하얀점 생김)

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


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

<img src="./images/we-want-alpha.png" class="png24">



2. 스크립트 사용2 (이미지/백그라운드 모두 가능하나 백그라운드 반복시 끊김현상 나타남 - 항상 나타나는것은 아닌듯.)

<!--[if IE 6]><script type="text/javascript" src="/js/unitpngfix.js"></script><![endif]-->

unitpngfix.zip

document.write('<script type="text/javascript" id="ct" defer="defer" src="javascript:void(0)"><\/script>');var ct=document.getElementById("ct");ct.onreadystatechange=function(){pngfix()};pngfix=function(){var els=document.getElementsByTagName('*'),ip=/\.png/i,al="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='",i=els.length,uels=new Array(),c=0;while(i-->0){if(els[i].className.match(/unitPng/)){uels[c]=els[i];c++;}}if(uels.length==0)pfx(els);else pfx(uels);function pfx(els){i=els.length;while(i-->0){var el=els[i],es=el.style,elc=el.currentStyle,elb=elc.backgroundImage;if(el.src&&el.src.match(ip)&&!es.filter){es.height=el.height;es.width=el.width;es.filter=al+el.src+"',sizingMethod='crop')";el.src=clear;}else{if(elb.match(ip)){var path=elb.split('"'),rep=(elc.backgroundRepeat=='no-repeat')?'crop':'scale',elkids=el.getElementsByTagName('*'),j=elkids.length;es.filter=al+path[1]+"',sizingMethod='"+rep+"')";es.height=el.clientHeight+'px';es.backgroundImage='none';if(j!=0){if(elc.position!="absolute")es.position='static';while(j-->0)if(!elkids[j].style.position)elkids[j].style.position="relative";}}}}};};
</script>

* 스크립트 넣으면 레이어 틀어지는 현상이 있음

3. ie6 과 그 외 브라우저에서 사용되는 스타일 적용 ( 링크된 텍스트 사용 불가 )

background:url('/common/img/sub/box_bg.png') repeat-y 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/common/img/sub/box_bg.png', sizingMethod='scale') => 반복으로 백그라운드 쓸때

background:url('/common/img/sub/box_bg.png') repeat-y 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/common/img/sub/box_bg.png', sizingMethod='crop') => 하나로 백그라운드 쓸때

* 백그라운드 이미지가 아예 사라지고 이미지가 나오지 않을때가 있음.

4. iepngfix.htc 사용 ( 전부 로드 될때까지 배경이 퍼렇게 나타남... )

5. DD_belatedPNG ( 백그라운드: 반복O, 링크O, 인풋?/ 이미지O )

http://www.dillerdesign.com/experiment/DD_belatedPNG/

사용법 :  위 사이트에서 js를 다운받은 후 아래 스크립트를 해당 html에 써준다.
'.png_bg' 는 본인의 png가 들어가는 클래스명/태그로 대체.
ex)) ('.png_bg, .use, img')


<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('.png_bg'); /* EXAMPLE */
    /* string argument can be any CSS selector */
    /* using .png_bg example is unnecessary */
    /* change it to what suits you! */
</script>
<![endif]-->

DD_belatedPNG_0.0.8a.js

DD_belatedPNG_0.0.8a-min.js