자주 사용되는 ie6 관련 CSS Hack
아래는 버그많은 IE6의 버그들을 집중적으로 잡아낼수있는, IE6 용 CSS hack 들입니다
스타 핵 (* html 을 이용)
별표문자인 전체 선택자를 html 타입 선택자 앞에 오도록 해서 다른브라우져에서 적용되지 않지만 IE계열에서만 적용되는 스타일시트를 정의할 수 있습니다.
즉 위의 2줄을 적었을경우, IE계열에서는 border:2pxl 스타일이 적용됩니다.
이 스타핵은 IE7에서 적용되지 않습니다.
추가) IE7에서 적용되는 스타핵은 아래와 같습니다.
그렇다면, 모든 IE계열(7버전 포함)에서 동작하는 스타핵은 아래와 같이 하면 됩니다.
!important 핵
위의 스타핵은 IE6을 구분하기 위하여 2가지의 선언을 해야합니다. 그러나 한 규칙선언안에서 IE6 이하버전을 위한 선언과 다른 브라우저를 위한 선언을 하고 싶다면 !important 핵을 사용하면 됩니다.
IE6 버전에서는 한 규칙안에 여러개의 속성을 사용할 수 없으므로, 첫번째 선언을 무시하고 두번째 선언을 적용합니다.
나머지 브라우져에서는 important 키워드가 쓰여진 속성의 우선순위를 높게 인식하기때문에 첫번째 선언을 적용합니다.
언더바핵
가장 많이 알려진 CSS핵입니다.
iE6이하 버전에서는 속성정의자의 _ (언더바)를 무시하고, 인식하는 점을 응용한 핵입니다.
두번째 정의된 display 의 _ (언더바)가 없다면, 모든 브라우져에서 display:block 이 적용될 것이나 _ (언더바)가 있기때문에 두번째 속성정의자는 IE6 이하 브라우져를 제외하곤 잘못된 속성정의자로 인식합니다.
따라서 IE6에서만 _display 를 display 로 인식하기때문에 display:block 속성이 적용됩니다.
스타 핵 (* html 을 이용)
별표문자인 전체 선택자를 html 타입 선택자 앞에 오도록 해서 다른브라우져에서 적용되지 않지만 IE계열에서만 적용되는 스타일시트를 정의할 수 있습니다.
a:hover {border:1px;} // 모든 브라우져에서 적용됨
*html a:hover {border:2xp;} // IE 계열에서만 적용됨.
*html a:hover {border:2xp;} // IE 계열에서만 적용됨.
즉 위의 2줄을 적었을경우, IE계열에서는 border:2pxl 스타일이 적용됩니다.
이 스타핵은 IE7에서 적용되지 않습니다.
추가) IE7에서 적용되는 스타핵은 아래와 같습니다.
**html {border:2xp;} // IE7에서만 적용됨.
그렇다면, 모든 IE계열(7버전 포함)에서 동작하는 스타핵은 아래와 같이 하면 됩니다.
*html body, **html body {border:2xp;} // 모든 IE에서만 적용됨.
!important 핵
위의 스타핵은 IE6을 구분하기 위하여 2가지의 선언을 해야합니다. 그러나 한 규칙선언안에서 IE6 이하버전을 위한 선언과 다른 브라우저를 위한 선언을 하고 싶다면 !important 핵을 사용하면 됩니다.
#top {
position:fixed !important;
position:static;
}
position:fixed !important;
position:static;
}
IE6 버전에서는 한 규칙안에 여러개의 속성을 사용할 수 없으므로, 첫번째 선언을 무시하고 두번째 선언을 적용합니다.
나머지 브라우져에서는 important 키워드가 쓰여진 속성의 우선순위를 높게 인식하기때문에 첫번째 선언을 적용합니다.
언더바핵
가장 많이 알려진 CSS핵입니다.
iE6이하 버전에서는 속성정의자의 _ (언더바)를 무시하고, 인식하는 점을 응용한 핵입니다.
.under {display:inline; _display:block}
두번째 정의된 display 의 _ (언더바)가 없다면, 모든 브라우져에서 display:block 이 적용될 것이나 _ (언더바)가 있기때문에 두번째 속성정의자는 IE6 이하 브라우져를 제외하곤 잘못된 속성정의자로 인식합니다.
따라서 IE6에서만 _display 를 display 로 인식하기때문에 display:block 속성이 적용됩니다.
Trackback Address:이 글에는 트랙백을 보낼 수 없습니다