lang/html
IE html5 파싱문제
C/H
2011. 1. 13. 13:27
현재는 IE8 이하에서 html5 태크를 인식시키기 위해서 아래 스크립트 코드를 사용중입니다.
위 스크립트 코드를 사용했을 경우 일반적인 HTML 페이지에서는 아무런 문제없이 HTML5 태그 사용이 가능해집니다.
* 201202....
- highchart.js 에서 canvas와의 문제로 IE8 이하에서 차트의 dot가 깨지는 문제가 발생합니다.
그래서 html5.js는 제거 그리고 html5 태크는 모두 <div>로 변경 CSS수정... ㅡ.ㅡ
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
위 스크립트 코드를 사용했을 경우 일반적인 HTML 페이지에서는 아무런 문제없이 HTML5 태그 사용이 가능해집니다.
간혹 CSS 렌더링에서 기타 다른 브라우저와 다른결과가 나오긴 하지만 그것 역시도 {display: block;} 을 지정하면 문제없이 거의 동일한 결과로 나타납니다.
header, section, aside, article, footer { display: block; }
하지만 위 문제중 HTML5 태그를 ajax.load() 형식으로 불러올 경우 IE8에서는 HTML5 태그를 제대로 인식 하지 못하는것 같습니다.
아래 그림은 HTML페이지로 접근했을 경우 IE8이 파싱한 결과입니다.
아래는 ajax로 해당 컨텐츠를 로딩했을 경우 IE8에서 파싱한 결과입니다.
문제는 class="listconwrap" 으로 CSS가 적용이 되어야 하지만 IE8에서는 XHTML으로 인식하는지, 혹은 HTML5 DOCTYPE 에 문제가 있는지, 아니면 IE8에서 태그리스트에 등록이 안되어 있는 태그라서 그런지 내용이 없는 태그로 인식하고 닫는태그로 자동으로 닫아 버립니다. 그러니 CSS class 적용이 무용지물이 되어버리는군요.
위 문제를 해결할 수 있는 방법이 없는지 찾아보고는 있지만 아직 이렇다할게 없네요.
* 201202....
- highchart.js 에서 canvas와의 문제로 IE8 이하에서 차트의 dot가 깨지는 문제가 발생합니다.
그래서 html5.js는 제거 그리고 html5 태크는 모두 <div>로 변경 CSS수정... ㅡ.ㅡ
반응형