Without haste, but without rest
[CSS] IE9에서 position: fixed 했을때 동작하지 않음 본문
지금 홈페이지를 만들면서 맨위에 메뉴를 넣고 스크롤시 항상 붙어있게 하려고
position:fixed로 해놓았다.
5대 브라우저중 유일하게!!! IE에서만 메뉴가 고정되지 않고 absolute되어있는 것이다.
(아..내가 이것때문에 을마나 고생을 한건지..ㅠ)
구글느님에게 수업이 "따라다니는 메뉴", "고정된 메뉴"라 엄청나게 질물은 했지만
돌아오는 결과는 모두 position:fixed였다.
너무 답답한 마음에 마지막으로 "ie9 position fixed"라고 검색하고 나서
나와 같은 문제를 격고 있는 페이지를 발견하였다.
position:fixed breaks in IE9라는 제목으로 포스팅되었다.
stackoverflow라는 사이트로 이름에서 느껴지는 포스로 좋아하는 사이트이다.. ;-)
영어로 블라블라 되어있어 자세한 사항은 모르지만 이 필자역시 나와 같이 IE에서만
fixed가 되지 않는다는 문제가 발생하였고 그 원인이 Quirks Mode.때문이라는 것을
댓글을 보고 알게 되었다.
그래서 바로 검색해서 자세하게 설명해준 블로그를 발견.
Quirks Mode 렌더링과 DTD.
간단하게 내가 이해한 내용을 써보면
Quirks Mode란 일종의 호환성 모드로 브라우저가 버전업을 하면서 렌더링 기술이
좋아지지만 이전의 버전으로 만들어졌던 페이지의 호환성 문제로 이전에 작성된문서가
깨질수도 있어서 그걸 보완하도록 만든 렌더링 모드.
이 Quirks Mode는 브라우저마다 웹표준을 지키는지는 다들 지맘데로이므로
개발자가 알아서 바꿔야한다는 문제점. 위 블로그에서 본봐로는 IE가 가장 표준을 안지켰음.
그래서 되도록이면 웹페이지를 작성할때 Quirks Mode를 발생하지 않도록 작성해야한다는 이야기.
Quirks Mode는 html 문서에서 가장위에 적는 DOCTYPE로 구분할 수 있는데
Quirks Mode를 유발시키는 DOCTYPE가
DTD를 적지 않는다거나
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">로 되어있는 경우.
(내 웹페이지 이걸로 되어있었다. // 아놔 이클립스 왜이렇게 해줬니..)
그래서 Quirks Mode를 유발하지 않도록 바꾸어 주었다.
HTML문서용 두번째 것으로 하였다.
HTML 4.01 문서라면
position:fixed로 해놓았다.
5대 브라우저중 유일하게!!! IE에서만 메뉴가 고정되지 않고 absolute되어있는 것이다.
(아..내가 이것때문에 을마나 고생을 한건지..ㅠ)
구글느님에게 수업이 "따라다니는 메뉴", "고정된 메뉴"라 엄청나게 질물은 했지만
돌아오는 결과는 모두 position:fixed였다.
너무 답답한 마음에 마지막으로 "ie9 position fixed"라고 검색하고 나서
나와 같은 문제를 격고 있는 페이지를 발견하였다.
position:fixed breaks in IE9라는 제목으로 포스팅되었다.
stackoverflow라는 사이트로 이름에서 느껴지는 포스로 좋아하는 사이트이다.. ;-)
영어로 블라블라 되어있어 자세한 사항은 모르지만 이 필자역시 나와 같이 IE에서만
fixed가 되지 않는다는 문제가 발생하였고 그 원인이 Quirks Mode.때문이라는 것을
댓글을 보고 알게 되었다.
그래서 바로 검색해서 자세하게 설명해준 블로그를 발견.
Quirks Mode 렌더링과 DTD.
간단하게 내가 이해한 내용을 써보면
Quirks Mode란 일종의 호환성 모드로 브라우저가 버전업을 하면서 렌더링 기술이
좋아지지만 이전의 버전으로 만들어졌던 페이지의 호환성 문제로 이전에 작성된문서가
깨질수도 있어서 그걸 보완하도록 만든 렌더링 모드.
이 Quirks Mode는 브라우저마다 웹표준을 지키는지는 다들 지맘데로이므로
개발자가 알아서 바꿔야한다는 문제점. 위 블로그에서 본봐로는 IE가 가장 표준을 안지켰음.
그래서 되도록이면 웹페이지를 작성할때 Quirks Mode를 발생하지 않도록 작성해야한다는 이야기.
Quirks Mode는 html 문서에서 가장위에 적는 DOCTYPE로 구분할 수 있는데
Quirks Mode를 유발시키는 DOCTYPE가
DTD를 적지 않는다거나
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">로 되어있는 경우.
(내 웹페이지 이걸로 되어있었다. // 아놔 이클립스 왜이렇게 해줬니..)
그래서 Quirks Mode를 유발하지 않도록 바꾸어 주었다.
HTML문서용 두번째 것으로 하였다.
HTML 4.01 문서라면
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">