grid布局兼容（grid布局兼容ie）



        最近在编写项目时遇到了一些兼容性的问题，因为头一次使用grid布局和flex布局进行IE兼容，在初期兼容时遇到了很让人头大的问题，好在最后解决，特意留个笔记.

        在IE中，grid布局最多兼容至IE10，且不完全兼容，可用的兼容属性为：

       定义grid容器  :  display:-ms-grid;

        定义行数：-ms-grid-columns;

        定义列数：-ms-grid-rows;

        重复函数：（重复主体）重复次数;

        定义内部的水平对齐方式 ：-ms-grid-column-ailgn;

                可选值 ：start |  左对齐

                                end | 右对齐

                                center | 居中显示

                                stretch | 初始值

        定义内部的垂直对齐方式 ：-ms-grid-row-ailgn; 可选值同上

        定义某个内部元素跨越多少行: -ms-grid-column-span

        定义某个内部元素跨越多少列: -ms-grid-row-span

       定义在网格中的哪行位置放置元素: -ms-grid-column

        定义在网格中的哪列位置放置元素: -ms-grid-row

其中最重要的就是最后两个属性 ，也是IE和别的浏览器的最大区别, 其余浏览器不设置最后两个属性时是按照在容器内部元素的默认顺序进行网格放置 , 但是在IE中如果不进行元素放置位置的设置的话就全部默认在第一行第一列显示.属实有够不智能的

下面是示例：

 当没有给IE设置在哪个网格中放元素时和其他浏览器的差距

谷歌：

IE：

 添加了-ms-grid-column/row后

诶，怎么好像还是不对的样子，为什么应该在最右边的元素依旧没动呢？这就要说到IE和其他浏览器在grid布局上面的第二个问题了,在其他浏览器中，当容器使用了grid布局时，容器中的元素会自动变成display:block或者display:inline-block,然后自动给其设置填充满网格的大小，但在IE中，虽然也会自动填充大小，但是并不会自动变成块级元素或者加强版的行内元素，所以对其设置大小和位置自然是无效的，上图中我前两个标签用的是div和p，最后一个标签使用的是span，导致在IE中出现了以上的问题，明白问题就好解决了，在对应的标签css处给其变成块级元素就可以

如图

 如图

可惜的是，在IE中不兼容grid的间距,可用编写margin或者padding的方法来进行间距的修改，但这样容易导致谷歌和IE显示差距太大了，那么有什么办法可以解决呢？当然有，在IE中必须填写的元素位置属性这个时候可算是有点点用处了，在你设置网格子元素的时候，不设置网格间的间距，而是使用一个DOM元素进行占位，使用DOM元素占据掉原来的间距位置，并且不设置任何内容，让其看起来跟间距一样，达到欺骗眼神的目的

示例

 谷歌

 IE

问题解决！

美中不足的是当需要的网格类型足够多时，写起来会很多，建议使用JS来进行自动生成.

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/28069.html