끄적대기

분명히 ir기법으로 많이 써봤던 것 같은데 난 이 버그를 왜 이제야 보게 되었지? 지금까지 수많은 작업을 해왔는데 이렇게 안써봤을리도 없을텐데 말이야... 상황은 간단했다. 버튼 이미지를 가운데 정렬시키고 :hover를 하기 위해서 배경이미지로 넣었는데... CSS는 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ display:inline-block; text-indent:-9999px; background:#url() no-repeat 0 0; ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 그런데 ie에서 text-indent 이녀석이 배경이미지 까지 날려버리네...ㅎ 해결 방법으로는  ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ display:inline-block; /*text-indent:-9999px;*/ line-height:-9999px; vertical-align:bottom; background:#url() no-repeat 0 0; ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 위의 방법이 안될경우에 아래의 방법을 사용 이 방법이 젤로 좋은 듯... font-size:0; line-height:0; text-shadow:none; color:transparent; ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 아...찜찜해...별로 좋은 방법도 아닌것 같다. 단순하게 생각하면 그냥 이런 상황을 만들지말자.

쉬운 방법으로 많은 사용되어지고 있는 png용 스크립트가 바로 png24이다. <style type="text/css">  .png24 {tmp:expression(setPng24(this));}  </style>  <script type="text/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> <img src="이미지.png" class="png24" alt="" /> 사용법은 간단하나 가끔 (아직 정확한 이유는 모르겠음) png이미지가 영역은 있으나 보이지 않을 경우가 있다. (혹은 주로 X박스가 뜬다.) OTL... 해결책으로는 1. 로컬에서는 확인지 되지 않으나 서버에 올려놓고 보면 나오는 경우가 있다. 2. png의 경로를 절대경로를 사용하면 나오는 경우가 있다. 3. 1x1 gif투명 이미지를 만들어서 올려놓고 obj.src=''; 이 부분에 경로를 넣어주면 된다. 문제가 생겼을때 1번과 3번을 동시에 진행해서 해결을 보면 된다.