如何修复CSS网格布局的跨浏览器兼容性？_Css_Sass_Grid_Cross Browser_Css Grid

如何修复CSS网格布局的跨浏览器兼容性？

css sass grid

如何修复CSS网格布局的跨浏览器兼容性？,css,sass,grid,cross-browser,css-grid,Css,Sass,Grid,Cross Browser,Css Grid,我已经成功地创建了CSS网格布局。不过，现在我想为不受支持或支持较差的浏览器（特别是IE11）添加支持或回退我已经添加了浏览器前缀，读了一百万篇关于添加浮动的文章，等等。我创建了一段应该可以工作的代码，但在IE11上测试时，我一辈子都无法让它呈现出来（我有一台Mac笔记本电脑，无法访问PC） //sass lint:禁用无重要无供应商前缀无重复属性最终换行符 //网格变量 $cols:12！违约 $50像素！违约 //断点 $lg:1199.98px； $md:991.98px； $sm:76

我已经成功地创建了CSS网格布局。不过，现在我想为不受支持或支持较差的浏览器（特别是IE11）添加支持或回退

我已经添加了浏览器前缀，读了一百万篇关于添加浮动的文章，等等。我创建了一段应该可以工作的代码，但在IE11上测试时，我一辈子都无法让它呈现出来（我有一台Mac笔记本电脑，无法访问PC）

//sass lint:禁用无重要无供应商前缀无重复属性最终换行符
//网格变量
$cols:12！违约
$50像素！违约
//断点
$lg:1199.98px；
$md:991.98px；
$sm:767.98像素；
$xs:575.98px；
$断点：(
（l，$lg，100%，1），
（百万美元，马里兰州，100%，2），
（s$sm，100%，2），
（x，$x，100%，3），
（否，0，100%，3）
) !违约
//印刷术
$font size:20px；
$font系列：'BrokenEn'，衬线；
$线高：1.4；
//动画
$grid动画：所有.15秒轻松输入输出；
$grid动画慢：全部.3秒轻松输入输出；
//全球的
*,
*：：之后，
*：：之前{
背面可见性：隐藏；
}
html{
框大小：边框框；
保证金：0；
过卷行为：无；
填充：0；
}
身体{
背景色：#fff；
边界：0；
框大小：继承；
颜色：#000；
字体：普通1rem$字体系列；
身高：100%；
左：0；
线高：1；
保证金：0；
溢出x：隐藏；
填充：0；
位置：相对位置；
}
//网格
标题，
主要的
页脚{
背景色：#F5DC；
宽度：100%；
}
r{
-ms网格柱：1层1层1层1层1层1层1层1层1层1层1层1层1层1层1层1层1层1层1层；
背景色：#7fffd4；
显示：-ms网格！重要；
显示：网格！重要；
网格间距：$边沟；
网格模板列：重复（$cols，1fr）；
位置：相对位置；
过渡：网格动画；
}
[类别*='c-']{
-ms网格柱跨度：$cols；
背景色：#faebd7；
网格列：span$cols；
位置：相对位置；
&.鸟巢{
-ms网格柱：1层1层1层1层1层1层1层1层1层1层1层1层1层1层1层1层1层1层1层；
背景色：#7fffd4；
显示：-ms网格！重要；
显示：网格！重要；
网格间距：$边沟；
网格模板列：重复（$cols，1fr）；
位置：相对位置；
}
&.包含自动{
左边距：$边沟；
右边距：边沟；
}
&.包含固定的{
左边距：自动；
右边距：自动；
宽度：$lg；
}
}
col wrap先生{
显示：内联块；
填充：0美元；
宽度：100%；
}
.no-c-gap{
网格列间距：0！重要；
}
@从1到$cols的$i{
.c-#{$i}{
-ms网格柱跨度：$i；
网格列：跨度$i；
}
}
@每个$name、$size、$container、$divide在$breakpoints中{
@仅介质屏幕和（最大宽度：$size）{
r{
网格间距：$gotter/$divide；
}
[类别*='c-']{
&.鸟巢{
网格间距：$gotter/$divide；
}
&.包含自动{
左边距：$gotter/$divide；
右边距：$gotter/$divide；
}
}
@从1到$cols的$i{
.#{$name}{$i}{
-ms网格柱跨度：$i；
网格列：跨度$i；
}
}
}
}
@不支持（显示：网格）{
r{
显示：内联块！重要；
宽度：100%！重要；
：：之后{
内容：''；
显示：块；
宽度：100%；
}
[类别*='c-']{
显示：块！重要；
浮动：左！重要；
保证金：0$保证金$保证金0；
}
}
@从1到$cols的$i{
.c-#{$i}{
宽度：calc（（100%/#{$cols}*#{$i}）-（#{$gotter}）！重要；
}
}
@每个$name、$size、$container、$divide在$breakpoints中{
@仅介质屏幕和（最大宽度：$size）{
@从1到$cols的$i{
.#{$name}{$i}{
宽度：calc（（100%/#{$cols}*#{$i}）-（#{$gotter}）！重要；
}
}
}
}
}
//如果浏览器不支持@support。
@介质全部和（-ms高对比度：激活），（-ms高对比度：无）{
r{
显示：内联块！重要；
宽度：100%！重要；
：：之后{
内容：''；
显示：块；
宽度：100%；
}
[类别*='c-']{
显示：块！重要；
浮动：左！重要；
保证金：0$保证金$保证金0；
}
}
@从1到$cols的$i{
.c-#{$i}{
宽度：calc（（100%/#{$cols}*#{$i}）-（#{$gotter}）！重要；
}
}
@每个$name、$size、$container、$divide在$breakpoints中{
@仅介质屏幕和（最大宽度：$size）{
@从1到$cols的$i{
.#{$name}{$i}{
宽度：calc（（100%/#{$cols}*#{$i}）-（#{$gotter}）！重要；
}
}
}
}
}

有人能帮我看一下代码并告诉我如何（1）改进我的网格，（2）让“@supports not（display:grid）”代码在IE11中工作吗

编辑：

这将是一个例子，说明它在所有现代浏览器中的外观，以及我希望它在IE回退后的外观


标题
左分区
左分区
左分区
左分区
页脚

@支持

不支持，因此您必须为支持网格的浏览器在其中添加代码。它应该覆盖非网格代码。（删除“非”）

网格仅在IE中使用，因此与浏览器中的部分选项相比，您最好使用网格作为支持

如果您需要进行大量的跨浏览器测试，请使用类似的工具

编辑：建议一个行动方案

我建议采用这种方法。

使用布局技术而不是

CSS网格

重新编写所有内容。多年来，在没有网格的情况下，人们一直在制作跨浏览器、高性能、快速响应的布局。这可能适用于所有目标浏览器。如果在这一点上，您通过使用CSS网格获得了更好的结果，请将其用作渐进增强

<body>
    <header class="r">Header</header>
    <main class="r">
        <section class="c-12 nest ratio-4-3">
            <div class="c-6">
                <div class="wrap">Div Left</div>
            </div>
            <div class="c-6">
                <div class="wrap">Div Left</div>
            </div>
        </section>
        <section class="c-12 nest no-c-gap ratio-4-3">
            <div class="c-6">
                <div class="wrap">Div Left</div>
            </div>
            <div class="c-6">
                <div class="wrap">Div Left</div>
            </div>
        </section>
    </main>
    <footer class="r">Footer</footer>
</body>