CSS Grid 布局是一种新的布局方式，它可以轻松实现复杂布局，但在 IE 浏览器中可能会出现网格样式被忽略的问题，这给前端开发者带来了极大的困扰。本文将介绍如何解决这个问题。
问题的原因
IE 浏览器中对于网格布局的支持程度较低，特别是对于网格样式方面的支持非常有限，甚至有时候样式会被完全忽略。
网格样式包括边框、背景颜色、文字颜色、字体等，这些样式被忽略后，布局的效果就会变得很不符合预期。
解决方法
为了让 IE 浏览器正确地渲染网格布局的样式，我们需要采用一些技巧来解决问题。具体来说，我们可以采用以下两个方法：
1. 采用 polyfill
Polyfill 是一种兼容性解决方案，在不支持新技术的浏览器当中，通过 JavaScript 的方式模拟其功能。因此，我们可以采用一些 polyfill 来解决 IE 浏览器中网格样式被忽略的问题。
具体来说，我们可以使用一些 polyfill 生命周期兼容性进行解决。其中，autoprefixer 和 postcss-grid-kiss 都是非常好的选择。它们补充了浏览器历史遗留问题并且兼容了较旧的浏览器。
为了使用这些 polyfill，我们只需要将它们引入页面即可。例如：
<head> <link rel="stylesheet" href="https://unpkg.com/autoprefixer@9.7.3"> </head>
2. 使用 hack
Hack 是一种黑科技，它可以让浏览器忽略掉一些样式的属性。通过 hack，我们可以让 IE 浏览器正确地渲染网格布局的样式。
具体来说，我们可以使用一些特殊的前缀来实现 hack。例如：
.my-grid {
display: grid;
/* Hack for IE 10-11 */
display: -ms-grid;
}在这个示例代码中，我们通过提供两个 display 属性来解决 IE 浏览器中网格样式被忽略的问题。
总结
CSS Grid 布局是一种非常强大的布局方式，但在 IE 浏览器中可能存在一些问题。为了解决这个问题，我们可以采用 polyfill 或者 hack 的方式来兼容 IE 浏览器。在实际开发中，我们需要根据具体情况选择最合适的解决方案，以确保网格布局的样式能够正确地显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6647c5a6d3423812e464ec70