CSS Grid在IE及Edge浏览器中无法正常工作的问题求助

Hey there, let's tackle this Grid issue you're facing with IE11 and old Edge (EdgeHTML-based). The core problem here is that these browsers only support the old, prefixed version of the CSS Grid specification—it has a different syntax than modern Grid, and your current code only uses the modern unprefixed properties. Also, I spotted a small typo that's definitely causing some trouble!

First, Fix the Typo #

Looking at your #news selector: you wrote grid-columnn: 1 / span 1; (notice the extra 'n' at the end of grid-column). That's invalid CSS and will break the layout for that element even in modern browsers—fix that first to grid-column: 1 / span 1;.

Key Differences for IE/Legacy Edge Grid Support #

IE11 doesn't recognize modern Grid features like repeat(), fr units work but with limitations, and it requires -ms- prefixes for all Grid properties. Here's how to adapt your code:

1. Replace display: grid with display: -ms-grid for IE support.
2. Expand repeat() into explicit values—IE doesn't support repeat(), so repeat(3, 2fr) becomes three separate 2fr values.
3. Use -ms-grid-columns and -ms-grid-rows instead of grid-template-columns/grid-template-rows.
4. Adjust placement properties: For IE, use -ms-grid-row/-ms-grid-column to set the starting position, and -ms-grid-row-span/-ms-grid-column-span to define how many rows/columns an element spans (instead of the modern span syntax in grid-row/grid-column).
5. Flexbox fallback for centering: IE has spotty flexbox support, so add -ms- prefixes to your .contents flex properties.

Modified CSS Code (With IE/Legacy Edge Support) #

@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } 
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; src: local('IBM Plex Sans'), local('IBMPlexSans'), url(https://fonts.gstatic.com/s/ibmplexsans/v2/zYXgKVElMYYaJe8bpLHnCwDKhdHeFQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } 

#grid p {font-family:"Roboto Slab";} 
#grid h4 {font-family:"IBM Plex Sans";} 
#grid a {font-family:"Space Mono"} 

#slider { background-color: #CC2424; padding-top: 25px; } 

#grid { 
    text-align: center; 
    display: -ms-grid; /* IE/Legacy Edge */
    display: grid; /* Modern Browsers */
    -ms-grid-columns: 1fr 2fr 2fr 2fr; /* Expanded from repeat(3,2fr) */
    grid-template-columns: 1fr repeat(3, 2fr); 
    -ms-grid-rows: 300px 300px; 
    grid-template-rows: 300px 300px; 
    margin-left: 2px; 
} 

#ps { 
    text-align: left; 
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / span 1; 
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1; 
    line-height: 25px; 
    border-bottom: 5px solid black; 
    overflow: scroll; 
} 

#news { 
    text-align: left; 
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / span 1; 
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / span 1; /* Fixed typo here */
    overflow: scroll; 
} 

.contents { 
    display: -ms-flexbox; /* IE/Legacy Edge */
    display: flex; 
    -ms-flex-pack: center; 
    justify-content: center; 
    -ms-flex-align: center; 
    align-items: center; 
} 

#infoA { 
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / span 1; 
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / span 1; 
    background-color: #D1D1D1; 
    color: black; 
    border-bottom: 5px solid #606060; 
} 

#infoB { 
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / span 1; 
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3 / span 1; 
    background-color: #606060; 
    color: white; 
    border-bottom: 5px solid #D1D1D1; 
} 

#infoC { 
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / span 1; 
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / span 1; 
    background-color: #D1D1D1; 
    color: black; 
} 

#infoD { 
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / span 1; 
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3 / span 1; 
    background-color: #606060; 
    color: white; 
} 

#infoImageA { 
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / span 1 ; 
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
    grid-column: 4 / span 1; 
    background-color: black; 
    overflow: hidden; 
    border-bottom: 5px solid white; 
} 

#infoImageB { 
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / span 1 ; 
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
    grid-column: 4 / span 1; 
    background-color: black; 
    overflow: hidden; 
} 

#grid img { width: 300px; }

Additional Notes #

• Legacy Edge vs. Chromium Edge: If you're targeting the newer Chromium-based Edge (released after 2020), it supports modern Grid fully—you only need this fallback for IE11 and the old EdgeHTML Edge.
• Autoprefixer: For future projects, consider using tools like Autoprefixer to automatically add these vendor prefixes for you, so you don't have to write them manually.
• Testing: Always test in IE11 directly (or use browser dev tools' IE emulation) to verify the layout behaves as expected—sometimes IE's Grid has odd spacing or alignment quirks that need minor adjustments.

内容的提问来源于stack exchange，提问作者Alex Crim