2013-04-09 3 views
10

HTML5 요소가있는 IE8에서 스타일을 가져올 수 없습니다. 나는 stackoverflow와 구글을 트롤링했는데, 나는 시도한 제안이 없다.IE8에서 html5shiv이 작동하지 않습니까?

XHTML 프레임 워크를 HTML5로 변환하는 훨씬 더 정교한 페이지에서 시작하여 조금은 신경 쓰지 않았지만 에뮬레이션 된 F12 IE8 표준 모드 IE에서는 제로 결과를 보았습니다. 간단한 코드 나는 일할 수 없다 :

<!doctype html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <meta charset="UTF-8" /> 
     <title>Template</title> 
     <style type="text/css"> 
      header { 
       display: block; 
       border:1px solid red; 
      } 
     </style> 
    </head> 
    <body> 
     <header> 
      HTML5 HEADER 
     </header> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    </body> 
</html> 

도와주세요 오비완, 당신은 나의 유일한 희망입니다.

답변

31

이동 head 섹션 HTML5Shiv의 script 요소 전에 다른 모든 stylescript 요소.

+3

사실, 먼저이를 수행해야합니다. –

+1

@Marat : 완료되었습니다. 이것은 프로젝트 페이지의 아주 짧은 지시 사항에 분명하게 명시되어 있습니다 ... 그러나 나는 그것을 철저히 읽지 않았고 이것이 사실이라고 생각하지 않았을 것입니다 - 저는 항상 문서의 맨 아래에 스크립트를 포함 시켰습니다. 대답을 주셔서 감사 드리며, 독서 문서는 사람들과 별개로 원숭이를 묘사하는 것입니다 : P – danjah

+1

나는 몇 번이나 내 머리를 부러 뜨리기 전에 이것을 발견하게되어 다행입니다. –

5

스타일 선언 앞에 shiv를 이동하십시오.

최신 브라우저의 성능을 높이려면 shiv에 조건부 주석을 사용하는 것이 좋습니다.

<!doctype html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <meta charset="UTF-8" /> 
     <title>Template</title> 

     <!--[if lt IE 9]> 
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 

     <style type="text/css"> 
      header { 
       display: block; 
       border:1px solid red; 
      } 
     </style> 
    </head> 
    <body> 
     <header> 
      HTML5 HEADER 
     </header> 
    </body> 
</html> 
0

비슷한 문제점이 있지만 내 문제는 IE 조건부 주석 구문과 관련이 있습니다.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>HTML5 Shim Test</title> 

    <style> 
     nav ul { font-weight: bold; } 
     /* the links wont be bold in IE8 unless the shim is working */ 
    </style> 

    <!--[if lt IE 9] > 
    <script src="html5shiv.js"></script> 
    <![endif]--> 

</head> 
<body> 
    <nav> 
     <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
     </ul> 
    </nav> 
</body> 
</html> 

당신은 ]<!--[if lt IE 9] >에서 > 사이의 공간을주의 했는가? 나는 아주 오랫동안 ...하지도 않았다. 공간을 제거하면 모든 것이 잘 작동합니다.

또한,이 HTML5 심 프로젝트 페이지는 심가 <head>에있을 필요가 있다고 않음을 언급 할 가치가 있지만, 스타일 시트 후에 올 수 있습니다 :

는 "그것은이 <body> 요소 앞에 포함되어야합니다 (예 : <head>)이지만 은 CSS 전후에 표시됩니다.하지만 성능을 위해서는 CSS 첫 번째 스크립트를 포함하는 것이 좋습니다. " via https://code.google.com/p/html5shim/

+2

추가 공간! * 너와 화난 주먹을 흔들어. * – danjah

관련 문제