随着 Web 技术的发展，HTML5 已经成为了现代 Web 开发中不可或缺的一部分。然而，由于各种原因，不同浏览器对 HTML5 的支持程度并不一样，这就给前端开发带来了很多兼容性问题。为了解决这些问题，我们可以使用 Modernizr 和 HTML5 Shiv 这两个工具。
Modernizr 是什么？
Modernizr 是一个 JavaScript 库，用于检测浏览器是否支持某些 HTML5 和 CSS3 特性。它会对浏览器进行检测，并在 <html> 标签上添加相应的类名，以便我们在 CSS 中进行条件判断。例如，在以下代码中：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------------
----- ---------------- ------------------
------- ----------------------------
-------
------
--------
------ ------------
-----
----
------ ----------------------
------ -----------------------
------ -------------------------
-----
------
---------
-------
-------如果浏览器支持 HTML5 的 <video> 标签和 CSS3 的 border-radius 属性，Modernizr 会在 <html> 标签上添加 video 和 border-radius 两个类名。这样我们就可以使用下面的 CSS 对不同浏览器进行不同的样式定义：
-- -------------------- ---- ------- -- --- ----- ---------- -- ------ ------- - ----------------- ------ - -- ---- ------------- ---------- -- ----------------- ---- -- - ------------- ------ -
HTML5 Shiv 是什么？
HTML5 Shiv 是一个 JavaScript 文件，用于让旧版的 Internet Explorer 浏览器支持 HTML5 元素。在 IE8 及以下版本中，如果我们使用了 HTML5 中的新元素（例如 <article>、<section> 等），这些元素将无法正常显示和使用样式。为了解决这个问题，我们可以引入 HTML5 Shiv，它会检测页面中是否存在 HTML5 的新元素，并创建它们的 DOM 结构，以便我们可以正常地对它们进行样式定义和操作。
要使用 HTML5 Shiv，我们可以在页面中引入以下代码：
<!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <![endif]-->
这段代码会在 IE9 及以上版本的浏览器中被忽略，只有在 IE8 及以下版本中才会生效。
使用 Modernizr 和 HTML5 Shiv
使用 Modernizr 和 HTML5 Shiv 可以让我们更方便地解决 HTML5 兼容性问题。下面是一个完整的示例：
-- -------------------- ---- -------
--------- -----
----- --------------
------
----- ----------------
--------- ---------------
----- ---------------- ------------------
------- ----------------------------
------- -- -- ---
------- ----------------------------------------------------------------------------------
------------
-------
------
--------
------ ------------
-----
----
------ ----------------------
------ -----------------------
------ -------------------------
-----
------
---------
---------
---------
----------- -----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------