주석 : 브라우저는 알려지지 않은 요소에 대한 스타일을 설정하지 않습니다 (다른 브라우저마다 요소의 기본 스타일이 다릅니다). IE9 이전 버전에서는 알려지지 않은 요소에 대한 스타일을 설정하는 것도 불가능합니다. 이 문제에 대한 해결책이 있습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다.
각 브라우저에는 지원하는 HTML 요소 목록이 있습니다. 목록에없는 요소는 알려지지 않은 요소로 간주됩니다. 브라우저는 알려지지 않은 요소에 대한 스타일을 설정하지 않습니다 (다른 브라우저마다 요소의 기본 스타일이 다릅니다). IE9 이전 버전에서는 알 수없는 요소를 스타일링하는 것도 불가능합니다. 알려지지 않은 요소의 DOM도 잘못 표시되며 IE는 하위 요소가없는 빈 노드를 DOM에 삽입합니다. 당신이 원래 생각한 모든 요소는이 알려지지 않은 요소의 어린이가 될 것입니다.
이 문제에 대한 해결책이 있습니다. 기사 태그를 사용하기 전에 JS를 사용하여 허위 기사 요소를 만들면 즉,이 요소를 인식하고 CSS를 사용하여 스타일을 설정합니다. 이 가짜 요소는 DOM에 삽입 할 필요조차 없습니다.
다음 예를 참조하십시오.
<! doctype html>
<html lang = "en">
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<title> 알 수없는 요소 </title>
<스타일>
기사 {디스플레이 : 블록; 테두리 : 1px Solid Red}
</스타일>
</meta> </head>
<body>
<기사>
<H1> Feimos의 블로그에 오신 것을 환영합니다 </h1>
<p> 이것은이 웹 사이트를 처음 방문한 <span>입니다. </span> </p>
</article>
</body>
</html>
IE6은 기사를 인식하지 못하므로 레드 테두리가 없습니다.
그러나 우리가 문장 JS를 머리에 추가하면 상황이 즉시 다릅니다.
<script type = "text/javaScript">
문서 .CreateElement ( "기사");
</스크립트>
IE6은이 요소를 인식하고 효과를 올바르게 표시한다고 주장합니다.
우리는 한 번에 모든 새로운 HTML5 요소의 가짜 사본을 만들 수 있으므로 앞으로 HTML5를 잘 지원하지 않는 브라우저에 대해 걱정할 필요가 없습니다. Remy Sharp의 HTML5 지원 스크립트는 이러한 작업을 수행하는 데 도움이됩니다. 이 스크립트의 기본 아이디어는 다음과 같습니다.
<!-[LT IE 9 인 경우]>
<script type = "text/javaScript">
var e = ( "abbr, 기사, 제쳐두고, 오디오, 캔버스, Datalist, 세부 사항"+
"그림, 바닥 글, 헤더, HGROUP, Mark, MENU, METER, NAV, 출력,"+
"진행, 섹션, 시간, 비디오"). Split ( ',');
for (var i = 0; i <e .length; i ++) {
문서 .CreateElement (e [i]);
}
</스크립트>
<! [endif]->
먼저 조건부 주석을 사용하여 IE9 이전 버전인지 확인하고 그렇다면 JS를 실행하십시오. 먼저 모든 새 태그를 E 배열에 쓰고 전체 배열을 반복하고 사본을 만듭니다.
스크립트는 이미 Google 프로젝트 호스팅에서 호스팅되어 있으며이 스크립트를 직접 연결할 수 있습니다.
<!-[LT IE 9 인 경우]>
<script src = "// html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<! [endif]->
또한이 스크립트는 페이지의 시작 부분, 바람직하게는 바닥이 아닌 머리에 배치해야합니다. 이런 식으로, 즉, 페이지 태그를 구문 분석하기 전에이 코드를 실행합니다.