grid布局浏览器兼容_使用 CSS Grid：以兼容不支持栅格化布局的浏览器

摘要

当使用任何 CSS 的新特性的时候，浏览器的兼容问题都必须去解决。与 Flexbox 和 CSS Grid 一样，在使用 CSS 新特性布局时，兼容性比性能增强更值得考虑。

在这篇文章中，我将探索现今处理浏览器兼容问题的方法。为了让我们现在就用上 CSS 的新特性，我们可以做出哪些努力，仍然给那些不支持新特性的浏览器提供很好的体验？

我们说的支持是什么？

在阐明如何在去支持那些本身不支持网格的浏览器之前，很有必要搞明白 支持 的含义。支持也许是站点必须在列表中的浏览器上看起来完全相同。这可能意味着对于所有的浏览器，你都可以不用去做一些收尾工作。这可能意味着你在测试这些浏览器的时候对他们能获得一致的体验而感到十分高兴。

一个相关的问题就是 ** 你怎么确定要支持的浏览器列表？** 即使是一个全新的网站，也不应该拍脑袋就定了。对于今天的大多数的企业都曾经创建过网站。你可能有一些分析工具用于查看网站支持的浏览器，但是要注意这些工具不会检测对移动端的支持情况。如果在较小屏幕上表现不佳，人们便不会在手机上访问这个网站！

如果没有任何的分析工具，你可以在Can I Use上面导入你所在位置的数据。

在Can I Use这个网站上，你可以导入所在位置的使用情况数据。 (预览大图)

同样值得在这里牢记网站的目标。例如，希望吸引生活在印度等新兴市场的访问者的网站应该确保能在这些国家用户使用的浏览器中正常运行。

我仅仅只需要担心旧浏览器吗？

截止发稿，Edge，Chrome，Firefox，Opera，Safari，iOS Safari 都支持了网格布局。

IE10 和 IE11 支持带有 -ms 前缀的原始规格。对于你正在使用的 旧 浏览器来说：

Internet Explorer 9(如果仅考虑新的规范，则为 IE 11 及更低版本)

Edge 15 及以下

Firefox 52 之前的版本

Safari 和 iOS Safari 10.1 版本之前

Chrome 57 之前的版本

Samsung Internet 6.2 之前的版本

然而，正如上一节所述，这些流行的桌面端和移动端浏览器在新兴市场中已经更常用。这些浏览器还不支持网格布局。比如说从世界范围来看，UC 浏览器占用了 8.1% 的流量，俨然是世界第三大流行的浏览器。但是如果碰巧你住在美国或者欧洲，可能你从来都没有听说