我正在使用我的第一个网站,它在Chrome和Firefox中运行良好,但在Internet Explorer和Edge中,我的主要内容的网格无效。
我在这里的一篇文章中读到,可能是因为我在定义布局时使用了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">
答案 0 :(得分:1)
当您使用CSS中最新的此类或属性(flexbox,grid ...)时,您必须检查每个浏览器的兼容性(特别是那些产品由microsoft ...):https://caniuse.com/#search=grid
如您所见,网格功能需要一些前缀才能在每个浏览器中工作。
此工具可以帮助您为css添加前缀:https://autoprefixer.github.io/。
只需复制/粘贴您的css并获得结果,您的代码现在将适用于IE。