Rev. 2.73

IE7이 나오고 약 5개월이 지났다. Market Share의 자료를 보면 현재 IE7의 점유률은 약 30%로 이대로라면 머지않아 IE6 사용자수를 넘어서고 세계 최고의 점유율을 차지할 전망이다. 더불어 파이어폭스 사용자도 꾸준히 늘고 있는 추세지만, 여전히 IE 사용자가 압도적이라는 사실은 예나 지금이나 다를바 없다. 웹2.0 바람이 불면서 IE만을 지향하던 웹 개발은 풍토는 조금씩 사그라들고 있지만, IE6과의 호환성을 등져버린 IE7의 출현으로 또다른 개발 프로세스가 추가된 것 또한 부인할 수 없는 사실이다.

browsers.jpg
browsers2.jpg

IE의 표준지원 부족에 관하여 또다시 불평해 보자. Webdevout.net의 자료에 따르면 브라우저별로 CSS 2.1 표준을 잘 지키는 순서로 나열하면 Opera9, Firefox2, IE7, IE6 순이다. 자료를 보면 IE가 간발의 차이로 3, 4위가 아닌 것을 알 수 있다. CSS 2.1 표준 지원도를 퍼센트로 환산하면 오페라 96% 파이어폭스 93%에 비해 IE7 54%, IE6 52% 수준이다. 덜떨어진 IE형제를 위해 마크업 핵이나 CSS핵 사용방법을 정리해 본다.

Underscore Hack

#header {
    margin-top: 8px;
    .margin-top: 10px; /* IE6 and IE7 both */
    _margin-top: 4px; /* IE6 only */
}

Selector Hack

#header {
    margin-top: 8px;
}

 /* IE6 only */
* html #header {
    margin-top: 4px;
}

/* IE7 only */
*+html #header {
    margin-top: 10px; 
}

Box Model Hack

div.content { 
    width:400px; 
    voice-family: "\"}\""; 
    voice-family:inherit;
    width:300px;
}

html>body .content {
    width:300px;
}

Max-width Hack

.class {
	width: expression(this.width > 533 ? 533: true);
}

Alternative Style Sheet Hack

<!--[if IE]>
    <LINK media="screen" href="style.css" type="text/css" rel="stylesheet">
<![endif]-->

Alternative Transparent PNG

<!--[if gte IE 5.5]>
 	  <![if lt IE 7]>
 	    <style type="text/css" media="screen">
 	      #alImg1 img, #alImg2 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
 	      #alImg1, #alImg2 { display: inline-block; }
 	      #alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='varyAlpha.png'); }
 	      #alImg2 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alphaTwo.png'); }
 	    </style>
 	  <![endif]>
<![endif]-->

HTC Transparent PNG

img.pngfix {
	behavior: url(pngHack.htc);
}
transparentpngs.zip transparentpngs.zip (998 Byte)

Comments

Got something to add? You can just leave a comment.

  • 안녕하세요~
    pngfix 핵에 관한 질문입니다!
    다름이 아니라~ img 태그에 class="pngfix" 클래스를 적용해서 쓰는 것 맞나요?

    그렇게 해보니 멀쩡한 png이미지가 이미지 설명글과 함께 엑박 그리고 배경이 겹쳐서 나오는데요~

    이 pngfix는 백그라운드 전용인가요?

    reply edit

Your Reaction Time!

captcha

avatar