:: 서비의 다락방

일전에 IE8 은 기본적으로 web standard 모드로 동작한다는 글을 올린적이 있습니다.

IE8을 설치하면 'Emulate IE7' 메뉴가 있는데요. 이는 개발자, 디자이너가 아니라면 'Emulate IE7'를 클릭하여
기존 IE7으로 웹서핑을 하듯이 브라우저를 이용 할 수 있습니다.

IE7 에뮬레이션 버튼

하지만 사이트를 사용자들에게 'IE7모드로 사용해 주세요.'와 같이 요구하는것은 심리적 반발감을 일으킬수도 있을겁니다.

이의 우회방법으로 버전타겟팅을 이용한 편법이 있습니다.
메타태그를 이용하여 ie7렌더링 엔진을 사용하게 함으로써 레이아웃이 망가지는것을 피하는 방법입니다.
[code]
<meta http-equiv="X-UA-Compatible" content="IE=7" />

[/code]
위와 같이 메타태그를 html 헤더에 삽입하면 됩니다만.. 문제는 ie7용 css 코멘트핵을 사용하고 있을 경우인데요.
메타태그로 렌더링은 ie7처럼 하게 되었지만 브라우저 자체는 ie8이므로 ie8의 핵을 이해하므로 아래와같이 ie7용
CSS를 적용해 주실 수 있습니다.
[code]


[/code]
브라우저가 'IE7과 그이상'인 경우 styleie7.css를 적용하겠다는 뜻입니다.

아래는 버그많은 IE6의 버그들을 집중적으로 잡아낼수있는, IE6 용 CSS hack 들입니다

스타 핵 (* html 을 이용)
별표문자인 전체 선택자를 html 타입 선택자 앞에 오도록 해서 다른브라우져에서 적용되지 않지만 IE계열에서만 적용되는 스타일시트를 정의할 수 있습니다.

a:hover {border:1px;} // 모든 브라우져에서 적용됨
*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;
}

IE6 버전에서는 한 규칙안에 여러개의 속성을 사용할 수 없으므로, 첫번째 선언을 무시하고 두번째 선언을 적용합니다.
나머지 브라우져에서는 important 키워드가 쓰여진 속성의 우선순위를 높게 인식하기때문에 첫번째 선언을 적용합니다.

언더바핵
가장 많이 알려진 CSS핵입니다.
iE6이하 버전에서는 속성정의자의 _ (언더바)를 무시하고, 인식하는 점을 응용한 핵입니다.

.under {display:inline; _display:block}

두번째 정의된 display 의 _ (언더바)가 없다면, 모든 브라우져에서 display:block 이 적용될 것이나 _ (언더바)가 있기때문에 두번째 속성정의자는 IE6 이하 브라우져를 제외하곤 잘못된 속성정의자로 인식합니다.
따라서 IE6에서만 _display 를 display 로 인식하기때문에 display:block 속성이 적용됩니다.

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

서비의 다락방

Search results for 'css'

CSS는 대략 이런 느낌?

IE8의 IE7 에뮬레이션 CSS Hack

자주 사용되는 ie6 관련 CSS Hack

글 분류

최근 글

최근 답글

최근 트랙백

글 보관함

캘린더

북마크