묻고답하기
css hack 사용법 질문-IE와 다른 표준 브라우져와의 차이때문에...
2009.09.10 15:16
파이어폭스 외 표준브라우져에서는 아래와 같이 잘 나오는데 ie에서는 2차메뉴 롤오버가 겹쳐서 위에 나옵니다.
그래서 IE에만 아래의 코드를 넣으면 될 것 같은데...정찬명님의 표준 코딩 기법을 읽다가
http://www.xpressengine.com/18287732#section19
CSS 코드의 문법적 유효성을 포기하는 대신 개발 편의와 성능 향상을 위해 CSS hack을 사용하는 방법 입니다. CSS 코드의 문법적 유효성을 유지하려는 목적은 브라우저 호환성을 획득하기 위함인데 CSS 코드는 문법적으로 유효하지 않더라도 브라우저 호환성 획득이 가능하기 때문에 코드의 무결성을 고집스럽게 주장할 필요가 없습니다. 현재 CSS의 활성 표준은 2.0 인데 반해 실제로 현존하는 대부분의 브라우저들은 이미 아직 표준으로 확정되지 않은 CSS 2.1 문법을 모두 지원하고 CSS 3.0 문법을 일부 지원하고 있으므로 CSS 코드에서 표준 코드에 대한 무결성은 이미 의미가 없습니다. CSS hack이 필요한 브라우저는 오직 IE 6~7 뿐인데 다음과 같은 형식으로 디버깅 할 수 있습니다. 같은 속성을 두 번 선언하여 앞에 선언된 표준 속성을 덮어쓰기 하는 원리 입니다.
.selector { property:value; *property:value; } /* IE 7 이하의 브라우저에 작용 합니다 */
.selector { property:value; _property:value; } /* IE 6 이하의 브라우저에 작용 합니다 */
게 나오는데 제 css 파일에 적용하려면 어떻게 하는 건지 몰라서 아시는 고수님들의 도움을 얻고자 질문남깁니다.
아님...제 코딩이 이상해서 그런지;;; 두 브라우져에서 다 똑같이 나오면 좋겠는데;;;;;
조언 부탁드립니다. ^^ 감사합니다!!!
#gnb { position:absolute; top:44px; left:10px; height:60px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li { list-style:none; float:left; background:url(../images/white/img07.gif) no-repeat left 50px; padding-left:2px; padding-top:13px; position:relative; left:-2px; white-space:nowrap; font-family: 굴림, Arial, Helvetica, sans-serif;}
#gnb li a { font-weight:bold; display:block; float:left; padding: 25px 15px 0px 15px; height:25px; color:#ffffff; white-space:nowrap; text-decoration:none; font-size: 14px;}
#gnb li a:hover,
#gnb li a:focus { color:#ffffff;}
#gnb li a:hover,
#gnb li.on a { background:url(../images/white/leaf.png) no-repeat center top;}
.gnb_subMenu{position:absolute; top:95px; left:-17px; height:24px;}
.gnb_subMenu li{position:relative; display:block; list-style:none; float:left;}
.gnb_subMenu li a {text-decoration:none; color:#333333; display:block; float:left; padding:4px 5px 0px 7px; font-family: 굴림, Arial, Helvetica, sans-serif; }
.gnb_subMenu li a:hover,
.gnb_subMenu li a:focus {color:#ff9900;}
.gnb_subMenu .on { background:url(../images/white/img09_1.gif) no-repeat left 7px;}
.gnb_subMenu .on a {color:#ff9900;}
#gnb { position:absolute; top:55px; left:10px; height:60px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li { list-style:none; float:left; background:url(../images/white/img07.gif) no-repeat left 40px; padding-left:2px; padding-top:12px; position:relative; left:-2px; white-space:nowrap; font-family: 굴림, Arial, Helvetica, sans-serif;}
#gnb li a { font-weight:bold; display:block; float:left; padding: 15px 15px 10px 15px; height:25px; color:#ffffff; white-space:nowrap; text-decoration:none; font-size: 14px;}
#gnb li a:hover,
#gnb li a:focus { color:#ffffff;}
#gnb li.on a { background:url(../images/white/leaf.gif) no-repeat center top;}
.gnb_subMenu{position:absolute; left:10px; top:110px; height:24px;}
.gnb_subMenu li{display:block; list-style:none; float:left;}
.gnb_subMenu li a {text-decoration:none; color:#333333; padding-left:10px; line-height:2em; position:relative;white-space:nowrap; font-family: 굴림, Arial, Helvetica, sans-serif;}
.gnb_subMenu li a:hover,
.gnb_subMenu li a:focus {color:#ff9900;}
.gnb_subMenu .on a {color:#ff9900;}
자답입니다. ^^;;; 다른 분들도 저런 현상 나타나면 이방법을~~~^^
.gnb_subMenu{position:absolute; top:95px; *top:108px; _top:108px; left:-17px; _left:25px; *left:25px;height:24px; }