新手上路，请多包涵

有没有办法同时使用 display: grid/-ms-grid 到一个样式表中，还是我必须使用 HTML hack 或 JavaScript 来查询使用网格布局查看页面的浏览器类型？

例子：

以下样式似乎不起作用

.container {
  display: grid -ms-grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(150px, 50px);
  grid-gap: 1vw;
  -ms-grid-columns: repeat(4, 1fr);
  -ms-grid-rows: repeat(150px, 50px);
  -ms-grid-gap: 1vw;
}

原文由 Paul Hendry 发布，翻译遵循 CC BY-SA 4.0 许可协议

css internet-explorer grid-layout css-grid

阅读 479

2 个回答

得票最新

社区维基

发布于
2022-10-13

✓ 已被采纳

这是我用于 IE 的：

我为所有当前的浏览器支持添加了一个@supports()。如果您使用 @supports() 传入一个新的网格属性，例如 @supports(grid-area: auto) 以确保现代浏览器会选择它。不要使用 @suppports(display: grid) 因为 IE 会识别 display:grid 然后会使用它没有的现代网格属性。我不得不使用 1px 的边距来模拟 IE 中的网格间隙

* {
    box-sizing: border-box;
}

.item-bg {
    background-color: rgb(92, 182, 205);
    border-radius: 6px;
    margin: 1px;
}

.container {
    display: -ms-grid;

   width: 800px;
    height: 600px;
    -ms-grid-columns: 200px 1fr 1fr;
    -ms-grid-rows: 80px 1fr 1fr 100px;



    }

.header {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1/4;

}
.sidebar {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2/4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;

}
.content-1 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2/4;

}
.content-2 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2/3;

}
.content-3 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3/4;
}
.footer {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4/5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1/4;
}
@supports(grid-area: auto){
    .item-bg {
        background-color: indianred;
        border-radius: 6px;
        margin: 0;
    }

    .container {
        display: grid;
        width: 750px;
        height: 600px;
        grid-template-columns: 200px 1fr 1fr;
        grid-template-rows: 80px 1fr 1fr 100px;
        grid-gap: 2px;
        }
    .header {
        grid-row: 1/2;
        grid-column: 1/4;

    }
    .sidebar {
        grid-row: 2/4;
        grid-column: 1/2;

    }
    .content-1 {
        grid-row: 2/3;
        grid-column: 2/4;

    }
    .content-2 {
        grid-row: 3/4;
        grid-column: 2/3;

    }
    .content-3 {
        grid-row: 3/4;
        grid-column: 3/4;
    }
    .footer {
        grid-row: 4/5;
        grid-column: 1/4;
    }
}

html是

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Basic Layout</title>
        <link rel="stylesheet" href="basiclayoutie.css" type="text/css">
    </head>
    <body>
        <div class="container">
            <div class="header item-bg">header</div>
            <div class="sidebar item-bg">sidebar</div>
            <div class="content-1 item-bg">Content-1</div>
            <div class="content-2 item-bg">Content-2</div>
            <div class="content-3 item-bg">Content-3</div>
            <div class="footer item-bg">Footer</div>
        </div>
    </body>
</html>

原文由 Anchorman 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-10-13

Vadim 的回答几乎就是你应该做的。但是还有一些 CSS 技巧可以用来减轻痛苦。

0 .请务必阅读此博客文章以决定是否要为支持 IE 的网站使用网格： https ://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the -ie-implementation-of-css-grid-layout/

如果您对上一个问题的回答是“是”，请继续阅读：

使用自动前缀。它将一些 CSS-grid 属性替换为它们的 IE 等效项。但是考虑到网格属性的复杂程度（重复次数、最小值、跨度等），自动前缀无法涵盖所有情况。
如果您想编写符合规范的 CSS，但仍支持 IE，那么一个非常值得信赖的伴侣是 @supports() at-rule。我用它来使用更高级的网格属性，例如 grid-gaps 等：

    .card-list {
     grid-row: 4;
     grid-column: 1 / 3;
     padding: 1.5vh 1vh;
     display: grid;
     grid-template-rows: 1fr 1fr;
     grid-template-columns: 1fr 1fr;
   }
   .card {
     margin-bottom: 1vh;
   }
   .card:nth-of-type(odd) {  /* takes care of IE */
     margin-right: 1vh;
     grid-column: 1;
   }
   .card:nth-of-type(even) {
     grid-column: 2;
   }

   @supports(grid-gap: 1vh) { /* still using standard code! */
     .card-list {
       grid-gap: 1vh;
     }
     .card {
       margin-right: 0;
       margin-bottom: 0;
     }
   }

原文由 kumarharsh 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

CSS：显示：网格和/或 -ms-grid

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

如何处理 CSS calc() 函数中的单位不一致问题？

Scss的rgba()方法无法对变量进行二次编译？

Stack Overflow 翻译