FF/IE6/IE7_Experience 교환을 위한 특별한 CSS HACK

본 글에서 언급한 CSS HACK은 class, id 속성에 대한 HACK이며, 배열 순서에 요구사항이 있습니다. 오늘 제가 이야기하고 싶은 것은 클래스와 ID에 대한 CSS HACK입니다.                     

코드 복사 코드는 다음과 같습니다.

.test{/*FF */
높이:20px;
배경색:주황색;
}
*+html .test{/*IE7*/
높이:20px;
배경색:파란색;
}
*html .test{/*IE6*/
높이:20px;
배경색:검정색;
}

위 CSS 코드를 보면 FF가 여전히 가장 순종적인 브라우저라는 것을 알 수 있습니다. IE6과 IE7에서 HACK을 사용하려면 앞에 html 태그를 추가해야 합니다. 여기서 기억하기 쉽습니다. IE6은 *html을 추가하고 IE7은 *+html을 추가합니다. 이는 버전이 추가되었음을 의미합니다. 클래스 및 ID에 대해 수행되는 CSS HACK의 장점은 순서를 고려할 필요가 없으며, 관리 및 기타 직원이 이 HACK을 통해 유사한 JS 브라우저 버전 제어를 쉽게 달성할 수 있다는 것입니다. 단점은 많은 코드를 생성한다는 점일 수 있습니다! 좋습니다. 먼저 이것에 대해 이야기해 보겠습니다.​

위 내용을 읽은 후 아래 효과를 클릭하면 다양한 브라우저에서 효과를 볼 수 있습니다. 주황색은 FF, 파란색은 IE7, 검은색은 IE6을 나타냅니다.​

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>스크립트 홈 www.jb51.net CSS 해킹</title> <style type="text/css"> *{ margin:0; padding:0; } .test{/*FF*/ height:20px; background-color:orange; } *+html .test{/*IE7*/ height:20px; background-color:blue; } *html .test{/*IE6*/ height:20px; background-color:black; } </style> <div class="test"></div>
[모두 선택하려면 Ctrl+A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]