html - CSS 网格不适用于 IE 或 Edge

Question

我正在开发我的第一个网站，它在 Chrome 和 Firefox 中运行良好，但在 Internet Explorer 和 Edge 中，我的主要内容的网格不起作用。

我在这里的一篇文章中读到，这可能是因为我在定义布局时使用了 repeat() 和 span，所以我将它们更改为仅键入每个列的大小out 而不是使用 repeat 并仅指定内容结束的列/行而不是使用 span 但问题是相同的。我将其改回使用 repeat 和 span 以防这不是问题。

这是我的 HTML 和 CSS:

@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: grid;
	grid-template-columns: 1fr repeat(3, 2fr);
	grid-template-rows: 300px 300px;
	margin-left: 2px;
}

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

#news {
	text-align: left;
	grid-row: 2 / span 1;
	grid-columnn: 1 / span 1;
	overflow: scroll;
}

.contents {
	display: flex;
	justify-content: center;
	align-items: center;
}

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

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

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

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

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

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

#grid img {
	width: 300px;
}

<div id="grid">
    <div id="ps">
        <h4>Prodcts & Services</h4>
        <ul>
            <li> <a href="./WHEELSETbbm.html" >Wheelset Press</a> </li>
            <li> <a href="./BOGIEbbm.html" >Bogie Testing Benches</a> </li>
            <li> <a href="./AUXILIARYbbm.html" >Auxiliary Equipment</a> </li>
            <li> <a href="./UNDERFLOORbbm.html" >Underfloor Lifting Machines</a> </li>
            <li> <a href="./SPECIALbbm.html" >Special Equipment Ordering</a> </li>
        </ul>
    </div>
			
    <div id="infoA" class="contents">
        <p>BBM employs approximately 100 dedicated <br>people in both our office and <br>workshop facilities. <br>BBM was born in 1965, producing fabricated parts.</p>
    </div>
			
    <div id="infoB" class="contents">
        <p>Thanks to long relationships with larger <br>companies, BBM extended its <br>product offering into railway assembly and <br>maintenance equipment in 1987.</p>	
    </div>
			
    <div id="infoC" class="contents">
        <p>BBM offers professional services, <br>pre-sale advice, planning, installation <br>and post-sale service to meet <br>our customer's requirements..</p>
    </div>
			
    <div id="infoD" class="contents">
        <p>BBM's quality and safety management systems <br>are certified to EN-ISO 9001:2008, EN-ISO 3834-2 <br>and DIN18800. BBM is known worldwide and <br>over the past 20 years, has provided <br>advanced machines to Assembly and <br>Maintenance Workshops in the rail industry throughout.</p>
    </div>
			
    <div id="infoImageA">
        <img src="./images/worldmap_open.jpg" />
    </div>
			
    <div id="infoImageB">
        <img src="./Images/Dscn0921-200.jpg"/>
    </div>
			
    <div id="news">

Here is how the grid is showing up in IE and Edge

This is how its supposed to look

Answer 1

当您使用 CSS 中最近出现的此类或属性(flexbox、grid ...)时，您必须检查每个浏览器的兼容性(尤其是微软的产品...):https://caniuse.com/#search=grid

如您所见，网格功能需要一些前缀才能在所有浏览器中工作。

此工具将帮助您为您的 css 添加前缀:https://autoprefixer.github.io/ .

只需复制/粘贴您的 css 并获得结果，您的代码现在将适用于 IE。