Page history of IE CSS Hack

Preview HTML

Diff with current

---

Title: IE CSS Hack | edited by Youngrok Pak at 10 years, 7 months ago.

<div class="contents">
<h4>IE 조건부 주석</h4>
<p>조건부 주석이란 IE를 제외한 브라우져에서는 주석으로 처리하지만 IE에서는 버전에 따라 실제 코드로 인식하는 주석을 말한다.</p>
<p>이를 이용해 각각의 IE 버전에 따라 최적화된 코드를 적용할 수 있다.</p>
<p>&nbsp;</p>
<p>예를 들어 IE 6 인 경우에만 적용하고픈 css 가 있다면 아래 처럼 IE 6 를 위한 css 를 따로 지정해 줄 수 있다.</p>
<pre>&nbsp;&nbsp;&nbsp; &lt;!--[if IE 6]&gt;<br> &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;link href="css/ie6.css" type="text/css" rel="stylesheet" /&gt;<br> &nbsp;&nbsp;&nbsp; &lt;![endif]--&gt;</pre>
<p>&nbsp;</p>
<p>형식</p>
<pre>&lt;!--[if <em>expression</em> ]&gt; <em>HTML</em> &lt;![endif]--&gt;</pre>
<p>IE가 아닌 브라우져에서는&nbsp;모두 주석으로 처리하지만 IE는 조건부 주석으로 인식하고 expression 에 따라 HTML 을 인식한다.</p>
<p>&nbsp;</p>
<p>if 문에 사용 가능한 조건 목록</p>
<ul class="list-type-5">
<li>[if IE 6] : IE 6 인 경우</li>
<li>[if !IE 6] : IE 6 가 아닌 경우</li>
<li>gt : "greater than" 높은. 예) [if gt IE 6] : IE 6 보다 높은 경우</li>
<li>gte : "gteater than or equal to", 같거나 높은.</li>
<li>lte : "less than or equal to", 같거나 낮은.</li>
<li>lt : "less than" 낮은.</li>
</ul>
<h3>Attribute Hack</h3>
<p>먼저 <a class="wiki" title="표준 호환 브라우저" href="http://ecolemo.springnote.com/pages/4051739">표준 호환 브라우저</a>에 서 일반적인 속성으로 맞춘 후 IE7, IE8을 보면서 차이가 나는 부분에는 속성에 #을 붙이면 표준호환 브라우저에서는 무시되지만 IE에는 반영된다. 그리고 마지막으로 IE6를 보면서 안 맞는 부분에 속성에 _를 붙여서 추가하면 IE6에만 적용되고 나머지에는 적용되지 않는다. IE6의 width 버그 등을 수정하기에 가장 좋은 방법</p>
<ol class="code">
<li>width: 300px; /* 표준 호환 브라우저 */</li>
<li>#width: 300px; /* IE 전용 */</li>
<li>_width: 302px; /* IE6 */</li>
<li>*width: 302px; /* IE5~7 */</li>
</ol></div>
<hr style="clear: both;">