2013-04-09 33 views
10

Tôi không thể lấy kiểu để chọn trong IE8 với các phần tử HTML5. Tôi đã trawled stackoverflow và Google, không có đề nghị tôi đã cố gắng làm việc.html5shiv không hoạt động trong IE8?

Tôi bắt đầu với một trang phức tạp hơn (tôi đang chuyển đổi khuôn khổ XHTML sang HTML5) và không quan tâm chút nào, nhưng sau khi thấy kết quả bằng không trong chế độ tiêu chuẩn IE8 và giả lập IE8 ... đây là mã đơn giản Tôi không thể làm việc:

<!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> 

Xin hãy giúp Obi-Wan, bạn là niềm hy vọng duy nhất của tôi.

Trả lời

31

Move script yếu tố HTML5Shiv để head phần, trước tất cả stylescript các yếu tố khác.

+3

Thực tế, điều này cần phải xảy ra trước tiên. –

+1

@Marat: Xong, và nó hoạt động. Điều này đã được nêu rõ trong các hướng dẫn rất ngắn trên trang dự án ... nhưng tôi đã không đọc kỹ nó, và sẽ không hình dung được điều này - tôi luôn bao gồm các kịch bản ở cuối tài liệu. Cảm ơn câu trả lời, và nhắc nhở rằng đọc tài liệu là những gì đặt khỉ ngoài mọi người: P – danjah

+1

Tôi vui vì tôi đã tìm thấy điều này trước khi tôi bẻ khóa của tôi đã có một vài lần. –

5

Di chuyển shiv trước khi khai báo kiểu.

Để tăng hiệu suất trong trình duyệt hiện đại, bạn có thể muốn sử dụng nhận xét có điều kiện cho 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

Tôi gặp sự cố tương tự nhưng vấn đề của tôi phải liên quan đến cú pháp nhận xét có điều kiện của 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> 

Bạn có nhận thấy khoảng cách giữa ]> trong <!--[if lt IE 9] >? Tôi đã không ... trong một thời gian rất dài. Hủy bỏ không gian và tất cả mọi thứ hoạt động tuyệt vời.

Ngoài ra, nó là đáng nói đến là trang dự án HTML5 Shim không nói rằng shim cần phải được trong <head>, nhưng nó có thể đến sau stylesheets của bạn:

"Nó phải được bao gồm trước phần tử <body> (ví dụ: trong <head>) nhưng không quan trọng nếu nó xuất hiện trước hoặc sau CSS - nhưng vì lợi ích của hiệu suất , sẽ có ý nghĩa hơn khi bao gồm CSS trước rồi tập lệnh này. " qua số https://code.google.com/p/html5shim/

+2

Không gian thêm ?! * lắc nắm tay giận dữ với bạn * – danjah

Các vấn đề liên quan