在现代的前端开发中，UI 设计是一个不可忽视的部分。Material Design Lite (简称 MDL) 是谷歌推出的一套 UI 框架，它遵循了 Material Design 原则，使得用户体验更加一致、美观。然而，兼容性问题也一直是前端开发者们头疼的一部分。
MDL 的兼容性支持
MDL 作为一款流行的前端 UI 框架，它的兼容性支持非常广泛。在 PC 端上，MDL 可以与主流浏览器完美兼容，如 Chrome、Firefox、Safari、IE 等。在移动端上，MDL 也可以适配主流移动浏览器，比如 Safari、Chrome 等。
但是，在使用 MDL 进行开发时，需要注意其在不同浏览器版本中对于 CSS 和 Javascript 的兼容性，以确保用户在不同设备、不同浏览器中都能够正确地展示出您设计的网页。
MDL 的 CSS 兼容性
在使用 MDL 开发时，需要注意其在不同浏览器版本中对于 CSS 的兼容性。MDL 的 CSS 使用了一些新的 CSS 属性，如 flexbox、transition、box-shadow、border-radius 等，因此在一些旧版本的浏览器中可能会出现样式错乱的情况。
在解决 CSS 兼容性问题时，我们可以尝试用浏览器前缀来兼容部分旧版本浏览器，如 -webkit、-moz、-ms 等前缀。例如，使用下面一段代码来解决 MDL 页面出现的样式错乱问题：
.mdl-card{
display: -webkit-box; /* Safari */
display:-ms-flexbox; /* IE */
display:flex; /* 标准语法 */
}MDL 的 Javascript 兼容性
MDL 的 Javascript 使用了一些新的 API，如 classList、addEventListener、requestAnimationFrame 等，在旧版本浏览器中可能会出现兼容性问题。针对这些问题，我们可以使用相关的 polyfill 库来解决。
polyfill 库是一种可以在不支持某些 API 的浏览器上透明地实现这些 API 功能的工具箱。MDL 推荐使用的是 classList.js 和 webcomponents.js 这两个 polyfill 库。通过引用这些库，可以在不支持新 API 的浏览器上正常显示页面，例如：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
----- ---------------- -----------------------------------------------------------------
------- ------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------
-------
------
---- ---- --- - ---- -- ---
-------
-------总结
MDL 作为一款流行的前端 UI 框架，其兼容性支持非常广泛，但是在使用它进行开发时，需要考虑其在不同浏览器版本下的兼容性问题。在解决 CSS 和 Javascript 兼容性问题时，可以采用浏览器前缀和 polyfill 库等方式，在多设备、多浏览器的环境下提供一致的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a5365148841e98941b37e9