웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
IE 6 Bug - Multi-Classes 본문
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE 6 Bug - Multi-Classes</title>
<style type="text/css">
/*
하나의 요소에 하나의 아이디, 두개 이상의 클래스가 연결되어 있을 경우...
아래와 같이 사용할 경우 IE 6에서는 먼저 사용된 note의 스타일은 정상 작됭되나,
나중에 사용된 memo의 경우는 정상적으로 스타일이 적용되지 않는 사례입니다.
*/
#tooltip.note { /* 먼저 나온 클래스의 경우 처리 됨 */
background: silver;
color: purple;
}
#tooltip.memo { /* 나중에 나온 클래스의 경우 처리 안됨 */
background: yellow;
color: hotpink;
}
/* 멀티 클래스는 IE 6에서 스타일이 적용됩니다. */
.test1.test2 {
color: maroon;
}
#tester.test2 { /* 먼저 나온 클래스의 경우 처리 됨 */
background: tan;
}
#tester.test1 { /* 나중에 나온 클래스의 경우 처리 안됨 */
background: maroon;
color: white;
}
#tester.test1.test2 { /* 정상 처리 안됨 */
text-decoration: underline;
}
abbr {
color: lightgreen;
}
</style>
<!--[if IE 6]><script type="text/javascript">document.createElement('abbr');</script><![endif]-->
</head>
<body>
<!-- 아이디 + 클래스 미지원 -->
<div id="tooltip" class="memo note">#tooltip.note.memo</div>
<div id="tester" class="test1 test2">tester</div>
<!-- abbreviation 미지원 -->
<abbr title="Design Jungle Academy">DJA</abbr>
</body>
</html>
'css' 카테고리의 다른 글
| CSS 가상으로 요소 추가 (0) | 2011.11.11 |
|---|---|
| language 속성 (0) | 2011.11.11 |
| CSS first-child (0) | 2011.11.11 |
| 상속 - Inheritance (0) | 2011.11.11 |
| CSS 우선 적용 규칙 - 캐스케이딩 룰 (0) | 2011.11.11 |