css - 显示 : initial for internet explorer

Question

我制作的网站在 Google Chrome 和 Firefox 中运行良好，但在 Internet Explorer 中运行时却遇到了问题。

所以，我的索引页上有 2 个幻灯片，但只有一个应该以特定的屏幕分辨率显示。我创建了一些媒体查询，因此我可以将 display:none; 设置为我不需要的幻灯片放映。为了让它再次出现，我使用 display:initial; 但 Internet Explorer 不支持该命令。

我需要一种方法来显示我在 Internet Explorer 中使用 display:none; 隐藏的内容。

PS:使用 visibility:hidden; 不是一个选项，因为它不应该保留空间。

如果你能帮到我，请回复。如果你不能，我还是感谢你阅读这篇文章。

代码来了；它可能会有所帮助(我不确定如何正确发布，抱歉):

<section id="containerGrotePage">
    <div id="page">
    <ul id="slider">
        <li><img src="images/slideshow/image2.jpg" alt="slideshow foto 1" /></li>
        <li><img src="images/slideshow/image1.jpg" alt="slideshow foto 2" /></li>
        <li><img src="images/slideshow/image3.jpg" alt="slideshow foto 3" /></li>
        <li><img src="images/slideshow/image4.jpg" alt="slideshow foto 4" /></li>
    </ul>
</div>
</section>

<div id="pageKlein">
    <ul id="sliderKlein">
        <li id="kleineSlideLi">
            <img id="fotoslideshowKlein" src="images/slideshow/image1.jpg" alt="slideshow foto 1" />
        </li>
    </ul>
<button onclick="slideshowKlein()" id="indexkleineSlideshowKnop">volgende</button>
</div>

这是我在最小屏幕上所做的:

#containerGrotePage{
display:none;
}
#page{
display:none;
}       
#kleineSlideLi{
background-color:black;
padding: 10px 50px 10px 50px;
}
#fotoslideshowKlein{
width:90%;
margin-left:4%;
border: 1px solid black;
}
#indexkleineSlideshowKnop{
width:90%;
margin-top:1%;
margin-left:4%;
}

第一个媒体查询最小值:440px

@media only screen and (min-width:440px){
#container{
    margin-top:3%;
}

/*--slideshow--*/
#page {
    display:initial;
    width:600px; 
    margin:50px auto;
}
#slider {
    width:600px; 
    height:250px;

/*IE bugfix*/
    padding:0;
    margin:0;
}

媒体查询最小值:610px

#slider li { 
list-style:none; 
}

#containerGrotePage{
display:initial;
display:block;
width:600px;
margin-top:2%;
margin-left:auto;
margin-right:auto;
}

#pageKlein{
display:none;
}
#page {
    display:initial;
width:600px; 
margin:50px auto;
}
#slider {
width:600px; 
height:250px;

/*IE bugfix*/
padding:0;
margin:0;
}

媒体查询最小值:715 像素

#slider {
width:600px;
height:250px;

/*IE bugfix*/
padding:0;
margin:0;
}

#slider li {
    list-style:none;
}

#page {
width:600px;
margin:50px auto;
}

希望我提供的信息有用。

ContainerGrotePage 是大幻灯片，顺便说一句，pageklein 是小幻灯片。我说荷兰语，所以有些名字对说英语的人来说可能没有意义。 :)

提前谢谢大家!

Answer 1

我找到了一个允许您在 IE 和 Chrome 中执行此操作的解决方案。 Here ，滚动到底部。

长话短说，IE doesn't accept 显示 = “初始”。所以诀窍是用 display = "" 代替。即，

if(...){
    a.style.display = "none";
    b.style.display = "";
}
else{
    a.style.display = "";
    b.style.display = "none";
}