Làm thế nào để HTML5 làm việc trên IE cũ

Làm thế nào để HTML5 làm việc trên IE cũ

HTML5 có lẽ là công nghệ đến muộn và mạnh mẽ nhất, nhưng một số trình duyệt vẫn chưa hổ trợ những thẻ mới trong HTML5, sau đây chúng ta sẽ cùng tìm hiểu những giải pháp để giải quyết vấn đề này.

Từ phiên bản IE8 trở xuống không hổ trợ các phần tử trong HTML5, cũng giễ hiểu bởi vì khi chúng ra đời HTML5 vẫn chưa phát triển.

Ta sẽ xem một ví dụ đơn giản là dùng thẻ time và định kiểu cho nó là in nghiêng.

<html>
<head>
  <title> test HTML5 </title>
  <style type="text/css">
    time{font-style: italic;}
  </style>
</head>
<body>
  <time datetime="2012-04-06">Today</time>
</body>
</html>

Nếu xem trên trình duyệt IE chúng ta sẽ thấy chẳng có tác dụng gì cả.

fix html5

Để fix lỗi này chúng ta sẽ thêm một đoạn code Javacript tạo ra một phần tử có tên là time.

<html>
<head>
  <title> test HTML5 </title>
  <style type="text/css">
    time{font-style: italic;}
  </style>
</head>
<body>
<script type="text/javascript">
  document.createElement("time");
</script>
  <time datetime="2012-04-06">Today</time>
</body>
</html>

Sau khi áp dụng xem dưới trình duyệt IE chúng ta có thể thấy lỗi đã được fix.

Một giải pháp khác.

Chúng ta sẽ tải file HTML5.js để fix lỗi trình duyệt.

Sau đó tạo liên kết tới file HTML5.js trong thẻ header với cú pháp loại trừ trình duyệt sau:

<!--[if lte IE 8]>
  <script type="text/javascript" src="HTML5.js"></script>
<![endif]-->

Đoạn code trên nói rằng nếu là từ trình duyệt IE8 trở xuống thì sẽ thực hiện liên kết tới file HTML5.js, vì từ phiên bản IE9 đã hổ trợ HTML5 nên chúng ta loại ra, nhưng có thể một ngày nào đó bạn sẽ gặp một thẻ nào đó mà IE9 không hổ trợ thì bạn sẽ sử dụng thêm cách đầu tiên để fix.

Để fix lỗi thì trình duyệt của bạn phải có javascript nhưng một ngày đẹp trời nào đó có người hay cái gì đó vô tình tắt javascript trên trình duyệt của bạn thì sao? Các thẻ HTML5 của bạn sẽ mất hết hiệu lực nhưng chẳng có vấn gì nghiêm trọng khi nội dung của nó ta vẫn đọc được chỉ có điều các định kiểu CSS sẽ bị vô hiệu hóa.

Tags: 
Bạn thấy bài viết này như thế nào?: 
Average: 10 (1 vote)
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Bình luận (0)

 

Add Comment

Filtered HTML

  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Các thẻ HTML được chấp nhận: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Tự động ngắt dòng và đoạn văn.

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Phân tích Drupal major version adoption năm 2015

Phân tích Drupal major version adoption năm 2015

This only goes back to June 2008 which is after D6 came out, so it's not ideal, but we can still glean some useful data out of it.

Những bức ảnh thực tế được cho là của iPhone 5S vừa được đăng tải trên mạng

Những bức ảnh được cho là của iPhone 5S

Những bức ảnh thực tế được cho là của iPhone 5S vừa được đăng tải trên mạng, tuy nhiên, có vẻ như chiếc điện thoại thế hệ mới của Apple không có nhiều khác biệt so với mẫu iPhone 5 hiện tại.

Mark Carver đã design xong cho Drupal Community trên Drupal.org

Mark Carver đã design xong cho Drupal Community trên Drupal.org

The styling changes on Drupal.org are a nice improvement, mostly because it is a regular reminder about the individuals who are pushing to make Drupal better

Công ty diệt chuột T&C

 

Diet con trung