如何使用 CSS 为 Microsoft Edge 定义网格答案

【问题标题】：How to define a grid for Microsoft Edge using CSS如何使用 CSS 为 Microsoft Edge 定义网格
【发布时间】：2017-10-30 03:49:54
【问题描述】：

我定义了以下 CSS，它适用于 Chrome 和 Firefox，但在 Microsoft Edge 中只显示网格的第二行。见https://farquharmacrae.blogspot.com.au/2017/09/first-generation.html。如何调整整个网格的 CSS 以在 Microsoft Edge 中显示？ Edge 现在不支持不带前缀的 grid-template-columns 和 grid-auto-rows 吗？任何帮助将不胜感激。

    *,
    *:before,
    *:after {
         box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         -ms-box-sizing: border-box;
    }

    .outer {
     max-width: 1000px;
     margin: 0 auto;
     display: grid;
     grid-gap: 1px;
     }

     /* no grid support? */
     .outer {
     display: flex;
     display: -ms-flex; /* Edge */
     display: -webkit-flex; /* Safari */     
     flex-wrap: wrap;
    -ms-flex: wrap;
    -webkit-flex: wrap;
    }

    .outer {
     display: grid;
     margin: 0 auto;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-auto-rows: minmax(250px, auto);
     }

     .outer > * {
      background-color: #fcf0ce;
      color: #4a0f03;
      font-size: 100%;
      margin-bottom: 0px;
     }

     .holder {
      margin-left: 1px;
      margin-right: 1px;
      /* needed for the flex layout */
       flex: 0 1 250px;
      -ms-flex: 0 1 250px;
      -webkit-flex: 0 1 250px;
      }

      .topic {
       display: grid;
       position: relative;
       overflow: hidden;
       cursor: pointer;
       transition: transform 0.4s;
      -webkit-transition: -webkit-transform 0.4s;
       -moz-transition: -moz-transform 0.4s;
     /* needed for the flex layout */
       flex: 0 1 250px;
      -ms-flex: 0 1 250px;
      -webkit-flex: 0 1 250px; 
      }

   /* with background images defined for each grid item - here are two of */ 
   /* twelve - all with different images and background-size and position */
   /* adjust for each image */

    .grid1 {
      background: url("image1") no-repeat;
      background-size: cover;
     }

    .grid2{
     background: url("image2") no-repeat;
     background-size: cover;
     background-position: 35% 0;
    }

   /* and the overlay for each image */
   .figcaption {
   position: absolute;
   left: 0;
   bottom: 0;
   margin: 0;
   width: 100%;
  height: 100%;
  opacity: 0.6;  
  z-index: 5;
  cursor: pointer;
  }

.captiontext {
  position: absolute;
  display: inline-block;
  padding: 10px;
  bottom: 3%;
  left: 0px;
  width: 100%;
  height: auto;
  color: #fcceaa;
  text-align: left;
  font-size: 100%;
  font-weight: bold;
  background: rgba(55, 29, 9, 0.4);
 }


   <div class="outer holder">
   <div class="topic grid1">
   <h2 class="captiontext">Caption1</h2>
   <a class="figcaption" href="post1"></a>
   </div>
   <div class="topic grid2">
   <h2 class="captiontext">Caption2/h2>
   <a class="figcaption" href="post2"></a>
   </div>
   .
   .
   .
   </div>

This is a screen capture of how the page appears in Edge This is the correct grid layout from Chrome

【问题讨论】：

一旦你解决了这个问题，指向你网站的链接就没有任何好处，问题就消失了。您需要在此处发布完整的示例。 minimal reproducible example
这是来自 Edge 的屏幕截图
您的屏幕截图对您的问题几乎没有任何价值。您仍然没有提供让我们帮助您所需的标记，这就是您的问题被投票关闭的原因。
你好 Rob，对不起，我对此很陌生。（我已经将近 30 年没有做过任何编码了。）我希望现在我已经提供了所有需要的东西来帮助你。感谢您的耐心等待

标签： css microsoft-edge grid-layout css-grid

【解决方案1】：

为 .topic 类添加了高度和宽度，现在它在 Edge 中可以正常工作，尽管不像在其他浏览器中那样以页面为中心

  .topic {
     display: grid;
     position: relative;
     width auto;
     height: 250px;
     overflow: hidden;
     cursor: pointer;
     transition: transform 0.4s;
     -webkit-transition: -webkit-transform 0.4s;
     -moz-transition: -moz-transform 0.4s;
    /* needed for the flex layout */
     flex: 0 1 250px;
     -ms-flex: 0 1 250px;
    -webkit-flex: 0 1 250px; 
   }

【讨论】：