IE和Edge中不明原因的网格行高

Question

IE和Edge中不明原因的网格行高

我已经编辑了CodePen示例,在中心div上添加了一些内容div,所有容器div都显示高度,显然不起作用请看这里:

这些线似乎导致下面的差距:

.container {
   ... 
   -ms-grid-rows: 1fr 1fr 1fr;
}

.top {
   ...
   height 8.4rem;
}

Run Code Online (Sandbox Code Playgroud)

但我仍然留下第二个问题,可以在上面的CodePen中看到.

我有一个应用程序容器,其中包含顶部的导航,中间的页面和底部的页脚.我的布局在除IE和Edge之外的所有浏览器中都能正常工作.

下面的代码在第二行和第一行之间创建了一个间隙.第二个问题是页面的大小远远超出任何内容.

body, html {
  height: 100%;
}

.container {
    background:cyan;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(auto, auto);
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr;
    height: 100%;
}

.top {
  background: yellow;  
  height: 8.4rem;
  position: relative;
  z-index: 99;
  grid-column: 1 / span 12;
  grid-row: 1;
  background: pink;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 1;
}

.mid {
  grid-column: 1 / span 12;
  grid-row: 2;
  min-width: 0;
  background: yellow;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 2;
  height: 100%;
}

.bottom {
    background: purple;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-column-span: 12;
}

Run Code Online (Sandbox Code Playgroud)

<body>
    <div class='container'>
        <div class='top'>TOP</div>
        <div class='mid'>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
            <p>some long text some long text some long text some long text</p>
        </div>
        <div class='bottom'>
            <p>some short text</p>
        </div>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Fil*_*ler 6

代码当前的排列方式,所有版本的Microsoft浏览器都支持Grid(这意味着遗留网格IE10-11,遗留网格Edge HTML12-15和兼容网格Edge HTML16和17)正在接收以下内容遗留行声明:

-ms-grid-rows: 1fr 1fr 1fr;

Run Code Online (Sandbox Code Playgroud)

请注意,最近兼容的Edge版本同时理解标准和遗留-ms语法,因此最后不要将旧版语法放在最后.传统声明必须在任何标准语法声明之前进行.

虽然Firefox,Chrome等的兼容版本都在接收:

grid-template-rows: minmax(auto, auto);

Run Code Online (Sandbox Code Playgroud)

minmax()函数将比具有一系列1fr行高度更好地处理不相等的内容,这似乎导致所述问题,因此向所有浏览器提供minmax()以用于行声明.请注意,所有MS旧版浏览器基本上都支持minmax(),前提是它是-ms-前缀.

编辑:正如Michael_B所建议的那样,使用grid-template-rows:auto更简单,而不是添加minmax(auto,auto).

.container {
  background: cyan;
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  /* legacy minmax() support */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
}

.top {
  background: pink;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 1;
  grid-column: 1 / span 12;
  grid-row: 1;
  height: 8.4rem;
}

.mid {
  background: yellow;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 2;
  grid-column: 1 / span 12;
  grid-row: 2;
}

.bottom {
  background: purple;
  -ms-grid-column: 1;
  -ms-grid-column-span: 12;
  -ms-grid-row: 3;
  grid-column: 1 / span 12;
  grid-row: 3;
}

Run Code Online (Sandbox Code Playgroud)

<div class='container'>
  <div class='top'>TOP</div>
  <div class='mid'>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
    <p>some long text some long text some long text some long text</p>
  </div>
  <div class='bottom'>
    <p>some short text</p>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

.container上的高度100%声明已被省略,因为它似乎强制在大屏幕的边缘17中的.top下面显示小的水平条纹背景青色(但在大多数其他浏览器中不包括IE).

另外要注意的是,为方便起见,repeat()函数的操作在不同的-ms-遗留语法下受支持.所以你也可以替换以下内容:

-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

Run Code Online (Sandbox Code Playgroud)

同

-ms-grid-columns: (1fr)[12];

Run Code Online (Sandbox Code Playgroud)

有关Grid语法的遗留-ms变体,请参阅此处:https://msdn.microsoft.com/en-us/library/hh673533(v = vs.85).aspx

归档时间：	7 年，4 月前
查看次数：	949 次
最近记录：	7 年，4 月前