2009년 2월 16일 월요일

[CSS]IE6 스타핵으로 png 배경으로 적용시 링크가 안먹힐때

png 를 배경으로 할경우 익스6에서는 png를 지원하지 않기에 스타핵이나 언더바핵으로 png를 css에서 처리해주었습니다. 하지만 배경위에 텍스트나 이미지에 링크값이 들어갈경우 익스6에서 링크가 안먹히게 됩니다.
이럴경우 해당 링크 즉 png 배경위에 링크 부분에 position:relative; 를 주시면 해결됩니다.
(이미지가 겹치는 부분만 링크가 안먹힙니다.)

ex)

css 소스
* html #png {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png',sizingMethod='crop'); }



<div id="#png"><a href="http://www.webmini.net" style="position:relative;" >웹미니 바로가기</a>

위와 같이 a 태그 안에 style에 position:relative; 를 추가해주시면 됩니다.
물론 class 로 불러와도 되며, 아래와 같이 해당 id 값 a 링크부분에 정의를 해주셔도 됩니다.

#png a {position:relative;}

해당 png 안에 있는 모든 a 태그는 전부 적용이 되는 형식입니다.

익스6이 사라지는 그날까지...
 

댓글 2개:

  1. 그런 방법이 있었군요. 계속 하다가 안되서 귀찮아서 그냥 IE6 사용자 철저 무시 체제를 써버렸다는;



    IE6은 이명박대통령님과 똑같은 존재;;;;;;; (앗 잡혀가기 실어효~)

    답글삭제
  2. @하늘바라기 - 2009/02/20 01:49
    계속적으로 새로운걸 만들고 사용해봐야 발전이 있는건데, 익스6은 참 오래 가는거 갔습니다. 익스6때문에 여러모로 불편한게 많죠^^

    답글삭제