背景
随着 CSS Grid 布局在前端开发中的广泛应用，IE 浏览器下的一些布局问题也逐渐浮现出来。尤其是在 IE10、11 版本中，由于对网格布局的支持不够完善，会导致布局错乱的问题。
本文将介绍一些解决 IE 浏览器下 CSS Grid 布局问题的方法，对于前端开发人员来说，有一定的指导意义。
问题及解决方法
1. 网格子项之间的跨度不一致
在 IE 浏览器中，如果网格子项之间的跨度不一致，会导致布局错乱。比如下面这个示例：
-- -------------------- ---- -------
-------
---------- -
-------- -----
---------------------- --------- -----
--------------- ------------- ------
--------- -----
-
------ -
------------ - - --
-
------ -
------------ - - --
-
------ -
--------- - - --
------------ - - --
-
--------
---- ------------------
---- ---------------------
---- ---------------------
---- ---------------------
------在 Chrome 浏览器中，布局效果如下：
但是在 IE11 浏览器中，布局效果如下：
可以看到，在 IE11 中，子项 item2 和 item3 的跨度不一致，导致布局错乱。
解决方法是，将跨度设置为相同的值，保持一致。比如上面的示例可以修改为：
-- -------------------- ---- -------
-------
---------- -
-------- -----
---------------------- --------- -----
--------------- ------------- ------
--------- -----
-
------ -
------------ - - ---- --
-
------ -
------------ - - ---- --
-
------ -
--------- - - ---- --
------------ - - ---- --
-
--------
---- ------------------
---- ---------------------
---- ---------------------
---- ---------------------
------这样，在 IE11 浏览器中的布局效果就正常了。
2. 子项内部的内容被压缩
在一些情况下，子项内部的内容（例如图片）会被压缩，导致布局错乱。比如下面这个示例：
-- -------------------- ---- -------
-------
---------- -
-------- -----
---------------------- --------- -----
--------------- ------------- ------
--------- -----
-
----- -
-------- -----
---------------- -------
------------ -------
------- --- ----- -----
-
----- - -
------- --
-
----- --- -
---------- -----
-
--------
---- ------------------
---- ----------------- ------------------------------------- ---------------------
---- ----------------- ------------------------------------- ---------------------
---- ----------------- ------------------------------------- ---------------------
------在 Chrome 浏览器中，布局效果如下：
但是在 IE11 浏览器中，布局效果如下：
可以看到，图片被压缩了，导致布局错乱。
解决方法是，将子项的 width 和 height 设置为 100%，让其占满整个单元格。比如上面的示例可以修改为：
-- -------------------- ---- -------
-------
---------- -
-------- -----
---------------------- --------- -----
--------------- ------------- ------
--------- -----
-
----- -
-------- -----
---------------- -------
------------ -------
------- --- ----- -----
-
----- - -
------- --
-
----- --- -
------ -----
------- -----
----------- --------
-
--------
---- ------------------
---- ----------------- ------------------------------------- ---------------------
---- ----------------- ------------------------------------- ---------------------
---- ----------------- ------------------------------------- ---------------------
------这样，在 IE11 浏览器中的布局效果就正常了。
总结
在使用 CSS Grid 布局时，我们需要考虑到兼容性问题，特别是在 IE11 浏览器中会存在一些布局问题。本文介绍了一些常见的问题以及解决方法，希望能对前端开发人员有所帮助。
完整示例代码见：https://codepen.io/fruitfree/pen/ZEzreLm
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa32a548841e989465d105