CSSグリッドレイアウト：IE11用のグリッドエリアをサポート

Question

この例をie11でどのように動作させるか教えてください。私は、ドキュメントをチェックし-ms-プレフィックスが

#page { 
    display: -ms-grid; 
    display: grid; 
    width: 100%; 
    height: 250px; 
    grid-template-areas: "head head" "nav main" "nav foot"; 
    -ms-grid-rows: 50px 1fr 30px; 
     grid-template-rows: 50px 1fr 30px; 
    -ms-grid-columns: 150px 1fr; 
     grid-template-columns: 150px 1fr; 
} 

#page > header { 
    grid-area: head; 
    background-color: #8ca0ff; 
} 

#page > nav { 
    grid-area: nav; 
    background-color: #ffa08c; 
} 

#page > main { 
    grid-area: main; 
    background-color: #ffff64; 
} 

#page > footer { 
    grid-area: foot; 
    background-color: #8cffa0; 
} 

例を助けなかった：https://jsfiddle.net/9bp1ffs1/ここで2つの固有の問題があります

Answer 1

。第1に、IE10と11、およびv15までのすべてのバージョンのEdgeはグリッド領域をサポートしていません。これらのブラウザ用のコードでは、代わりにグリッド線を使用する必要があります（グリッド領域はほとんどの場合直感的です）。第2に、IE11はメインHTMLタグを完全にサポートしていません。この場合、IE11はメインタグをグリッドレイアウトに適切に配置またはスタイル付けしません。 IE /エッジとW3Cモデルの両方のためにグリッド線を使用して、ここにあなたの例のフォーク作業

： https://jsfiddle.net/FilmFiddler/q074gpx8/4/

#page { 
    display: -ms-grid; 
    display: grid; 
    width: 100%; 
    height: 250px; 
    -ms-grid-rows: 50px 1fr 30px; 
    grid-template-rows: 50px 1fr 30px; 
    -ms-grid-columns: 150px 1fr; 
    grid-template-columns: 150px 1fr; 
} 
#page > header { 
    -ms-grid-column: 1; 
    -ms-grid-column-span: 2; 
    -ms-grid-row: 1; 
    grid-column: 1/3; 
    grid-row: 1; 
    background-color: #8ca0ff; 
} 
#page > nav { 
    -ms-grid-column: 1; 
    -ms-grid-row: 2; 
    -ms-grid-row-span: 2; 
    grid-column: 1; 
    grid-row: 2/4; 
    background-color: #ffa08c; 
} 
#page #main { 
    -ms-grid-column: 2; 
    -ms-grid-row: 2; 
    grid-column: 2; 
    grid-row: 2; 
    background-color: #ffff64; 
} 
#page > footer { 
    -ms-grid-column: 2; 
    -ms-grid-row: 3; 
    grid-column: 2; 
    grid-row: 3; 
    background-color: #8cffa0; 
} 

div要素に置き換え主なタグとHTML、：

一般

<section id="page"> 
    <header>Header</header> 
    <nav>Navigation</nav> 
    <div id="main">Main area</div> 
    <footer>Footer</footer> 
</section> 

IEとEdgeによって使用される古いCSSグリッドモデルは、現在のW3C実装とはかなり異なっています。 -ms-prefixの必要性とは別に、プロパティの命名にはかなりの違いがあり、グリッドエリアやグリッドギャップもサポートしていません。また、fit_content（）やrepeat（）などの関数はサポートされていませんが、後者にはMicrosoft固有の実装があります。

IE /エッジで使用される古いグリッドモデルにグリッド線を使用してのMSDNページ内の参照があります： https://msdn.microsoft.com/en-us/library/hh673533(v=vs.85).aspx

IE /エッジとW3Cのモデルとの違いについての議論があり、ここでは、特性の違いを含む： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement