Question

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

class MainMenu(Screen):
    first_size = NumericProperty(settings.sizes[settings.options[0]]["first_label"])
    second_size = NumericProperty(settings.sizes[settings.options[0]]["second_label"])

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

Answer 1

Added height and width to the .topic class and it now works fine in Edge, although not centered on the page as it is in other browsers

  .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; 
   }

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

1 个答案: