보통 IE5,5와 IE6에서의 투명 PNG이미지 처리시 CSS와 스크립트로 다음과 같이 처리하는데
.png24 { tmp:expression(setPNG24(this)); }
/* png24 이미지 파일을 웹에서 투명하게 변경하는 스크립트 */ 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 ''; }
보통 위와 같이 처리하면 onmouseover='this.src=this.src.replace(".gif","_over.gif")'와 같이 처리하는데..
이미지 토글처리를 하다가 setPNG로 filter:progid:DXImageTransform 필터가 적용되면 mouseover 이벤트로 이미지 변경이 되지 않았다. IE7, IE6에서 필터가 적용되면 onclick, onmouseover이던지 이벤트는 모두 먹어버리고 심지어 <a>태그도 먹질 않는다. 다른 브라우저에서는 아예 filter 속성이 먹질 않아서 정상적으로 작동한다.
<!--[if lt IE 7]> <script type="text/javascript"> var arVersion = navigator.appVersion.split("MSIE") var version = parseFloat(arVersion[1]) function correctPNG() // correctly handle PNG transparency in Win IE 5.5 and 6. { if ((version >= 5.5) && (document.body.filters)) { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText var imgAttribs = img.attributes; for (var j=0; j<imgAttribs.length; j++) { var imgAttrib = imgAttribs[j]; if (imgAttrib.nodeName == "align") { if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle break } } var strNewHTML = "<span " + imgID + imgClass + imgTitle strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" strNewHTML += "(src='" + img.src + "', sizingMethod='scale');\"" strNewHTML += " onmouseover=\"PNGswap('" + img.id + "');\" onmouseout=\"PNGswap('" + img.id +"');\"" strNewHTML += "></span>" img.outerHTML = strNewHTML i = i-1 } } } } window.attachEvent("onload", correctPNG); function PNGswap(myID) { var strOver = "_on" var strOff = "_off" var oSpan = document.getElementById(myID) var currentAlphaImg = oSpan.filters(0).src if (currentAlphaImg.indexOf(strOver) != -1) oSpan.filters(0).src = currentAlphaImg.replace(strOver,strOff) else oSpan.filters(0).src = currentAlphaImg.replace(strOff,strOver) }
</script> <![endif]-->
<script language="JavaScript" type="text/javascript"> <!-- function imgSwap(oImg) { var strOver = "_on" // image to be used with mouse over var strOff = "_off" // normal image var strImg = oImg.src if (strImg.indexOf(strOver) != -1) oImg.src = strImg.replace(strOver,strOff) else oImg.src = strImg.replace(strOff,strOver) } //--> </script>
.context_bar_form_field { height: 15px; // 모든 브라우저 #height: 15px; // IE 전용 _height: 21px; // IE6.0 과 이전버젼용 }
우선 파폭에 맞추어 개발을 한 후 E7 에서 점검한다. 수정할 부분이 있다면 # 접두어를 붙여 수정해 준다. #이 붙은 것은 FF 에서 무시한다. 하지만 IE 는 재설정 해준다. 다음에 IE6 을 열고 수정하면서 _ 를 접두어로 붙여 새로 재설정 한다. IE7 은 '-' 가 붙은 것을 무시한다.
부분적으로 읽어들이지 못하게 하는 경우에는 Caio's hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.
p { /*/*/ color:white; /* */ }
Mac IE 4.5, Netscape 4 제외시키기
@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다. Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.
@import url("/css/style.css")
Mac IE 5 제외시키기
CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.
p { /* \*/ color:white; /* */ }
Win IE 4~5 제외시키기
셀렉터 바로 뒤에 /**/라고 적는다.
p/**/ { color:white;}
Win IE 4~5, Mac IE 4.5~5 제외시키기
프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.
p { color/* */:white;}
Win IE 4~6, Mac IE 4, Netscape 4 제외시키기
셀렉터 앞에 html>body를 붙인다.
html>body p { color:white;}
Win IE 6 제외시키기
프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.
p { color /**/:white;}
star hack
셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.
*html p { color:white; }
underscore hack
프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
p { _color:white; }
hash hack
프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.
p { #color:white; }
star 7 hack
셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.
html*p { color:white; }
xmlns hack
속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법. Mozilla, Fire-fox, Opera 7/8, Safari 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
html[xmlns] h1 { color:red; }
:root hack
셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.
이올린에 북마크하기
이올린에 추천하기
techbug.zip