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

问题描述

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

我在这里读到一篇文章，可能是因为我在定义布局时使用了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">

这是网格在 IE 和 Edge 中的显示方式

这就是它应该看起来的样子

标签： htmlcssinternet-explorermicrosoft-edgecss-grid

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

问题描述

解决方案

推荐阅读