如何是ie8兼容html5

如何使IE8兼容HTML5：使用HTML5 Shiv、利用Modernizr、使用CSS Polyfills、通过JavaScript Polyfills、采用Graceful Degradation策略。在这些方法中，使用HTML5 Shiv 是最简单且有效的解决方案。

HTML5 Shiv是一种JavaScript工具，通过在IE8及更早版本中动态创建HTML5元素，使这些元素在旧浏览器中可识别。通过在HTML文档中引入HTML5 Shiv，可以确保页面在IE8中正常显示和运行。只需在页面的部分添加一行代码，即可实现兼容性。

一、使用HTML5 Shiv

HTML5 Shiv是一个轻量级的JavaScript库，旨在解决IE8及更早版本无法识别HTML5新元素的问题。它通过在页面加载时动态创建这些新元素，使其在旧浏览器中可用。使用HTML5 Shiv的方法非常简单，只需在部分添加以下代码：

<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->

这个条件注释确保只有在IE9及更早版本中才加载HTML5 Shiv脚本。这样，现代浏览器不会受到影响，而旧版IE浏览器则能够正确解析HTML5标签。

二、利用Modernizr

Modernizr是一个强大的JavaScript库，用于检测浏览器对HTML5和CSS3特性的支持。通过Modernizr，可以根据浏览器的能力，动态加载适当的Polyfills或进行降级处理，以确保页面功能的兼容性。

1. 安装Modernizr

首先，需要在项目中引入Modernizr库。可以通过CDN方式引入，或者下载并手动添加到项目中。以下是通过CDN引入的代码示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

2. 检测特性支持

Modernizr提供了多种检测方法，可以在页面加载时检查特定的HTML5或CSS3特性是否被支持。例如，可以使用以下代码检测浏览器是否支持HTML5视频：

if (Modernizr.video) {
  // 浏览器支持HTML5视频
} else {
  // 浏览器不支持HTML5视频，进行降级处理
}

通过这种方式，可以根据浏览器的能力动态加载Polyfills或进行降级处理，以确保页面在旧版浏览器中的兼容性。

三、使用CSS Polyfills

CSS Polyfills是一种通过JavaScript模拟现代CSS特性的方法，使其在旧版浏览器中可用。例如，CSS3 Pie是一个常用的CSS Polyfill库，可以使IE6-9支持CSS3的圆角、阴影和渐变效果。

1. 引入CSS3 Pie

首先，需要在项目中引入CSS3 Pie库。可以通过CDN方式引入，或者下载并手动添加到项目中。以下是通过CDN引入的代码示例：

<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/PIE/2.0beta1/PIE_IE678.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/PIE/2.0beta1/PIE_IE9.js"></script>
<![endif]-->

2. 应用CSS3 Pie

在需要使用CSS3特性的元素上，添加以下CSS规则，使CSS3 Pie生效：

.element {
  behavior: url(PIE.htc);
}

通过这种方式，可以在IE6-9中使用CSS3的圆角、阴影和渐变效果，从而提高页面的兼容性。

四、通过JavaScript Polyfills

JavaScript Polyfills是一种通过JavaScript模拟现代JavaScript API的方法，使其在旧版浏览器中可用。例如，可以使用ES5 Shim库来为旧版浏览器添加ES5标准的Array、Function和Object方法。

1. 引入ES5 Shim

首先，需要在项目中引入ES5 Shim库。可以通过CDN方式引入，或者下载并手动添加到项目中。以下是通过CDN引入的代码示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.15/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.15/es5-sham.min.js"></script>

2. 使用ES5方法

引入ES5 Shim库后，可以在旧版浏览器中使用ES5标准的Array、Function和Object方法。例如，可以使用Array.prototype.forEach方法：

var array = [1, 2, 3];
array.forEach(function(item) {
  console.log(item);
});

通过这种方式，可以在IE8及更早版本中使用ES5标准的方法，提高JavaScript代码的兼容性。

五、采用Graceful Degradation策略

Graceful Degradation是一种设计策略，旨在确保页面在旧版浏览器中的基本功能可用，同时在现代浏览器中提供更丰富的体验。通过这种策略，可以在不影响核心功能的前提下，逐步引入现代特性。

1. 核心功能优先

在设计页面时，首先确保核心功能在所有浏览器中都可用。这意味着在旧版浏览器中，页面应该能够正常显示和运行，即使缺少一些现代特性。例如，可以使用简单的HTML和CSS构建页面的基本结构和样式，确保其在IE8中可用。

2. 渐进增强

在确保核心功能可用的前提下，可以逐步引入现代特性，以增强页面在现代浏览器中的体验。例如，可以使用CSS3的动画和过渡效果，增强页面的视觉体验。如果这些特性在旧版浏览器中不可用，可以通过降级处理，确保页面仍然可用。

以下是一个示例，展示如何使用Graceful Degradation策略：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Graceful Degradation Example</title>
  <style>
    /* 核心样式，确保在所有浏览器中可用 */
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
    /* 渐进增强样式，仅在支持CSS3的浏览器中可用 */
    @supports (transition: all 0.3s ease) {
      .box {
        transition: background-color 0.3s ease;
      }
      .box:hover {
        background-color: red;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在这个示例中，.box元素的核心样式确保其在所有浏览器中都可用，而CSS3的过渡效果仅在支持@supports规则的浏览器中生效。通过这种方式，可以确保页面在旧版浏览器中的基本功能可用，同时在现代浏览器中提供更丰富的体验。

六、结合使用多种方法

为了确保页面在IE8及更早版本中的兼容性，通常需要结合使用多种方法。以下是一个综合示例，展示如何结合使用HTML5 Shiv、Modernizr、CSS Polyfills和JavaScript Polyfills，以实现最佳的兼容性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Comprehensive Compatibility Example</title>
  <!-- 引入HTML5 Shiv -->
  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
  <!-- 引入Modernizr -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
  <!-- 引入CSS3 Pie -->
  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PIE/2.0beta1/PIE_IE678.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PIE/2.0beta1/PIE_IE9.js"></script>
  <![endif]-->
  <!-- 样式 -->
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      /* CSS3 Pie支持的样式 */
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      behavior: url(PIE.htc); /* 使CSS3 Pie生效 */
    }
    @supports (transition: all 0.3s ease) {
      .box {
        transition: background-color 0.3s ease;
      }
      .box:hover {
        background-color: red;
      }
    }
  </style>
</head>
<body>
  <!-- 内容 -->
  <div class="box"></div>
  <!-- 引入ES5 Shim -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.15/es5-shim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.15/es5-sham.min.js"></script>
  <!-- 脚本 -->
  <script>
    // 使用Modernizr检测特性支持
    if (Modernizr.video) {
      console.log('浏览器支持HTML5视频');
    } else {
      console.log('浏览器不支持HTML5视频');
    }
    // 使用ES5方法
    var array = [1, 2, 3];
    array.forEach(function(item) {
      console.log(item);
    });
  </script>
</body>
</html>

在这个综合示例中，我们结合使用了HTML5 Shiv、Modernizr、CSS3 Pie和ES5 Shim，以确保页面在IE8及更早版本中的兼容性。通过这种方法，可以最大限度地提高页面在旧版浏览器中的兼容性，同时在现代浏览器中提供更丰富的体验。