1) IEPNGFix (http://www.twinhelix.com/css/iepngfix/ )
다운로드->>http://www.twinhelix.com/css/iepngfix/iepngfix.zip
다운로드
blank.gif와 iepngfix.htc파일을 원하는경로에 놔둡니다.(단 blank.gif 경로에따라 iepngfix.htc에서 경로바꿔야 하는듯)
CSS에 behavior: url(iepngfix.htc); 추가
문제점: 내부에 하이퍼링크(<a href~~~></a>)가 있는경우 IEPNGFix:Childeren of posioned element are unclickable이라고 에러가뜸
1.다운로드
1.다운로드
여제
TAG
<ul id="test"><li><a href="#">sdsd</a></li></ul>
CSS
#test{ position:relative; left:100px; top:100px; behavior: url(iepngfix.htc); background: #fcc url(image/pic.png) no-repeat 0 0;height:250px; width:250px;}
2)unit-png-fix (http://labs.unitinteractive.com/unitpngfix.php)
다운로드->>http://labs.unitinteractive.com/downloads/unitpngfix.zip
다운로드
clear.gif와 unitpngfix.js파일을 원하는경로에 놔둡니다.(역시 clear.gif ,unitpngfix.js 경로지정 주의)
태그에<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->추가
문제점: CSS의 포지션지정,z-index 증 몇몇이 안먹힘 불가.....
예제
<head>
<title>무제 문서</title>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
<style type="text/css">
#test{ position:relative; left:100px; top:100px; background: #fcc url(image/05mainnavi.png) no-repeat 0 0;height:250px;
</style>
</head>
<body>
<ul id="test"><li><a href="#">sdsd</a></li></ul>
</body>
3)DD_belatedPNG.fix(http://www.dillerdesign.com/experiment/DD_belatedPNG/)
다운로드->>http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.7a.js
다운로드
clear.gif와 unitpngfix.js파일을 원하는경로에 놔둡니다.(역시 clear.gif ,unitpngfix.js 경로지정 주의)
html에<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('#test')
</script>
<![endif]--> 가
위예제 #test와 같이 사용할한 선택자(id 또는 class 또는 tag)를 지정
문제점: 몇몇에 태그에 먹히지않음 body,tr,td,input
예제
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('#test');
</script>
<![endif]-->
</head>
<style type="text/css">
#wrap{ position:relative;}
#test{ position:relative; left:100px; top:100px; background: #fcc url(image/05mainnavi.png) no-repeat 0 0;height:250px; width:250px;}
</style>
<body>
<div id="wrap">
<ul id="test"><li><a href="#">sdsd</a></li></ul>
</div>
</body>
단! 포지션 지정을 위해선 위와같이 바깥에 하나더 감싸줄 필요가 있슴..위 예제는 #test에 #wrap로 감싸준것.
CSS와 알파값을 제대로 사용하기위한 몇몇 방법이였습니다.. 그나마 마지막이 CSS지정을 거의 다할수 있는데 각기 여러문제가 많군요. 다른좋은 방법이 있다면 좋은데..불필요한 마크업이 들어가는건 어쩔수 없는것인지 ㅠㅠ
다운로드->>http://www.twinhelix.com/css/iepngfix/iepngfix.zip
다운로드
blank.gif와 iepngfix.htc파일을 원하는경로에 놔둡니다.(단 blank.gif 경로에따라 iepngfix.htc에서 경로바꿔야 하는듯)
CSS에 behavior: url(iepngfix.htc); 추가
문제점: 내부에 하이퍼링크(<a href~~~></a>)가 있는경우 IEPNGFix:Childeren of posioned element are unclickable이라고 에러가뜸
1.다운로드
1.다운로드
여제
TAG
<ul id="test"><li><a href="#">sdsd</a></li></ul>
CSS
#test{ position:relative; left:100px; top:100px; behavior: url(iepngfix.htc); background: #fcc url(image/pic.png) no-repeat 0 0;height:250px; width:250px;}
2)unit-png-fix (http://labs.unitinteractive.com/unitpngfix.php)
다운로드->>http://labs.unitinteractive.com/downloads/unitpngfix.zip
다운로드
clear.gif와 unitpngfix.js파일을 원하는경로에 놔둡니다.(역시 clear.gif ,unitpngfix.js 경로지정 주의)
태그에<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->추가
문제점: CSS의 포지션지정,z-index 증 몇몇이 안먹힘 불가.....
예제
<head>
<title>무제 문서</title>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
<style type="text/css">
#test{ position:relative; left:100px; top:100px; background: #fcc url(image/05mainnavi.png) no-repeat 0 0;height:250px;
</style>
</head>
<body>
<ul id="test"><li><a href="#">sdsd</a></li></ul>
</body>
3)DD_belatedPNG.fix(http://www.dillerdesign.com/experiment/DD_belatedPNG/)
다운로드->>http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.7a.js
다운로드
clear.gif와 unitpngfix.js파일을 원하는경로에 놔둡니다.(역시 clear.gif ,unitpngfix.js 경로지정 주의)
html에<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('#test')
</script>
<![endif]--> 가
위예제 #test와 같이 사용할한 선택자(id 또는 class 또는 tag)를 지정
문제점: 몇몇에 태그에 먹히지않음 body,tr,td,input
예제
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('#test');
</script>
<![endif]-->
</head>
<style type="text/css">
#wrap{ position:relative;}
#test{ position:relative; left:100px; top:100px; background: #fcc url(image/05mainnavi.png) no-repeat 0 0;height:250px; width:250px;}
</style>
<body>
<div id="wrap">
<ul id="test"><li><a href="#">sdsd</a></li></ul>
</div>
</body>
단! 포지션 지정을 위해선 위와같이 바깥에 하나더 감싸줄 필요가 있슴..위 예제는 #test에 #wrap로 감싸준것.
CSS와 알파값을 제대로 사용하기위한 몇몇 방법이였습니다.. 그나마 마지막이 CSS지정을 거의 다할수 있는데 각기 여러문제가 많군요. 다른좋은 방법이 있다면 좋은데..불필요한 마크업이 들어가는건 어쩔수 없는것인지 ㅠㅠ
[출처] IE6리하 PNG 투명값처리 소스들.. (웹디들의커뮤니티카페 :: Dom FAM ::) |작성자 샷타이거
'프로그래밍 > 기타 등등' 카테고리의 다른 글
| 이미지 사이즈를 줄여서 홈페이지에 업로드하기 (0) | 2009.10.16 |
|---|---|
| 언어(ISO 639) 코드 (0) | 2009.09.29 |
| 네이버 스마트에디터, 다음 오픈에디터 (0) | 2009.09.25 |
| HTML 특수문자코드표 (0) | 2009.08.07 |
| [펌][CSS] PNG 포멧 용법 (0) | 2009.08.06 |
