IE和Edge中无法解释的网格行高度

时间：2018-06-22 20:11:15

标签： html css css-grid

我已经编辑了CodePen示例，以在所有容器div上的高度处向中心div添加了一些内容，但显然无法正常工作，请在此处查看：

https://codepen.io/anon/pen/OEBxNr

以下几行似乎导致了上述差距：

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

.top {
   ...
   height 8.4rem;
}

但是我仍然有下面的第二个问题，可以在上面的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;
}
<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>

2 个答案:

答案 0 :(得分：6)

当前代码的排列方式，支持Grid的所有版本的Microsoft浏览器（即旧版IE10-11，旧版Edge HTML12-15和兼容版Edge HTML16和17）都是收到以下旧行声明：

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

请注意，Edge的最新兼容版本理解标准语法和旧版-ms语法，因此不要将旧版语法放在最后很重要。旧版声明必须在任何标准语法声明之前。

兼容的Firefox，Chrome等版本均收到：

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

与具有一系列1fr行高相比，minmax（）函数将更好地处理不相等的内容，这似乎引起了所述问题，因此需要为所有浏览器提供minmax（）以进行行声明。请注意，所有这些MS旧版浏览器基本上都支持minmax（），前提是它带有-ms-前缀。

编辑：根据Michael_B的建议，仅使用grid-template-rows：auto较简单，而不要添加minmax（auto，auto）。

<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>
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

.container上的height 100％声明已被省略，因为这确实会迫使在大屏幕中Edge 17的.top下出现一小段背景青色水平青色（但在大多数其他浏览器中，不是这样） IE）。

为方便起见，需要注意的另一件事是在不同的-ms-传统语法下支持repeat（）函数的操作。因此，您也可以替换以下内容：

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

与

{{1}}

有关Grid语法的旧版-ms变体，请参见此处： https://msdn.microsoft.com/en-us/library/hh673533(v=vs.85).aspx

答案 1 :(得分：0)

MID 部分在我的计算机上 Internet Explorer 11 的顶部对齐-使用您当前的CSS或最初发布的内容。

enter image description here

但是，容器周围有大量填充-这是浏览器渲染的副产品。

由于每种浏览器和设备都可能对显示的内容应用微小的差异，因此在应用任何样式之前对布局进行规范化将非常有帮助，并且不会感到沮丧。

在大多数情况下， Normalizing 本质上是一种删除浏览器预设并定义起始值的方法，以帮助标准化随后如何解释所有内容。

这是我的个人 normalize.css ... 

/* ┌─────────────────────────────────────────────────────────────────┐
/* │   Normalize v1.1                                                │
/* │   Created by Dustin Halstead                                    │
/* └─────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Universal Adjustments                                        │ 

    /* 1. Correct line height in all browsers. */
    /* 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
        * {
            padding: 0;
            margin: 0;
            border: 0;
            border-collapse: collapse;
            vertical-align: baseline;
            border-spacing: 0;
            text-decoration: none;
            line-height: 1.15; /* 1 */
            -ms-text-size-adjust: 100%; /* 2 */
            -webkit-text-size-adjust: 100%; /* 2 */
        }

/* └────────────────────────────────────────────────────────────────┘ 


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Sections                                                     │ 

    /* Correct display in IE 9-. */
        article, aside, footer, header, nav, section, figcaption, figure, main { display: block; }

    /* Correct `h1` font size and margin within `section` and `article` areas in Chrome, Firefox, and Safari. */
        h1 { font-size: 2em; margin: 0.67em 0; }

/* └────────────────────────────────────────────────────────────────┘ 


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Grouping                                                     │ 

    /* 1. Correct box sizing in Firefox. */
    /* 2. Show overflow in Edge and IE. */
        hr {
            box-sizing: content-box; /* 1 */
            height: 0; /* 1 */
            overflow: visible; /* 2 */
        }

    /* 1. Correct inheritance and scaling of font size in all browsers. */
    /* 2. Correct odd `em` font sizing in all browsers. */
        pre {
            font-family: monospace, monospace; /* 1 */
            font-size: 1em; /* 2 */
        }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Text                                                         │ 

    /* 1. Remove the gray background on active links in IE 10. */
    /* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
        a {
            background-color: transparent; /* 1 */
            -webkit-text-decoration-skip: objects; /* 2 */
        }

    /* Correct font weight in Chrome, Edge, and Safari. */
        b, strong { font-weight: bolder; }

    /* Correct the scaling and odd `em` font sizing in all browsers. */
        code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }

    /* Correct font style in Android 4.3-. */
        dfn { font-style: italic; }

    /* Correct font size in all browsers. */
        small { font-size: 80%; }

    /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
        sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
        sub { bottom: -0.25em; }
        sup { top: -0.5em; }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Embedded Content                                             │ 


    /* Add the correct display in iOS 4-7. */
        audio:not([controls]) { display: none; height: 0; }

    /* Hide overflow in IE. */
        svg:not(:root) { overflow: hidden; }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Forms                                                        │

    /* Remove the margin in Firefox and Safari. */
        button, input, optgroup, select, textarea { margin: 0; }

    /* Remove the inheritance of text transform in Edge, Firefox, and IE. */
        button, select { text-transform: none; }

    /* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. */
    /* 2. Correct the inability to style clickable types in iOS and Safari. */
        button,
        html [type="button"], /* 1 */
        [type="reset"],
        [type="submit"] {
            -webkit-appearance: button; /* 2 */
        }

    /* Correct the text wrapping in Edge and IE. */
        legend { box-sizing: border-box; display: table; max-width: 100%; white-space: normal; }


    /* Remove the default vertical scrollbar in IE. */
        textarea { overflow: auto; }

    /* Correct the cursor style of increment and decrement buttons in Chrome. */
        [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

    /* Correct the odd appearance in Chrome and Safari. */
        [type="search"] { -webkit-appearance: textfield; }

    /* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
        [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

    /* Correct the inability to style clickable types in iOS and Safari. */
        ::-webkit-file-upload-button { -webkit-appearance: button; }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Interactive                                                  │

    /* Correct display in Edge, IE, and Firefox. */
        details, menu { display: block; }

    /* Correct display in all browsers. */
        summary { display: list-item; }

/* └────────────────────────────────────────────────────────────────┘


/* ┌────────────────────────────────────────────────────────────────┐
/* │   Miscellaneous                                                │

    /* Correct display in IE 9-. */  
        canvas { display: inline-block; }

    /* Correct display in IE. */
        template { display: none; }

    /* Correct display in IE 10-. */
        [hidden] { display: none; }

/* └────────────────────────────────────────────────────────────────┘

试一试，看看它是否有助于改善您所看到的内容。

希望它会有用。

更新：

意识到浏览器在调整大小时的布局比初始渲染要中断。

该问题似乎是由于以下原因直接导致的：display:-ms-grid;
...以及一些定位错误。
另外，需要定义display: flex;，以使内容在指定的div中正确流动。

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 270px;
    background:cyan;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(auto, auto);
}

.top {
    min-height: 8em;
    background: pink;
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    -ms-grid-row: 1;
    grid-column: 1 / span 12;
    grid-row: 1;
}

.mid {
    min-height: 10em;
    background: yellow;
    -ms-grid-column: 1;
    -ms-grid-column-span: 12;
    -ms-grid-row: 2;
    grid-column: 1 / span 12;
    grid-row: 2;
    display: flex;   
}

.bottom {
    min-height: 5em;
    background: purple;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-column-span: 12;
    grid-row: 3;
    grid-column: 1 / span 12;
}
相关问题
最新问题