显示:Internet Explorer的初始值

Question

我已经创建了一个在Google Chrome和Firefox中运行良好的网站,但是当我在Internet Explorer中运行它时,我遇到了问题.

所以,我的索引页面上有2个幻灯片,但只有一个应该以特定的屏幕分辨率显示.我创建了一些媒体查询,所以我可以设置一个display:none;我不需要的幻灯片.并使我再次出现,display:initial;但Internet Explorer不支持该命令.

我需要一种方法来显示我display:none;在Internet Explorer 中看不到的内容.

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;
}

媒体查询最小值:715px

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

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

#slider li {
    list-style:none;
}

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

我希望我提供的信息很有用.

ContainerGrotePage是大型幻灯片,BTW和pageklein是小型的.我说荷兰语,所以有些名字可能对说英语的人没有意义.:)

先谢谢你们!

Answer 1

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

长话短说,IE不接受 display = "initial".所以诀窍是用它display = ""代替.也就是说,

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

Answer 2

如果你需要设置初始值(两行),这在css文件中起作用:

显示:内联;

显示:初始;

Answer 3

有同样的问题，display: block 或 display: inline 将在 IE 中显示内容。但是，我们使用类来响应式地隐藏/显示布局内容，并且需要有 2 组类，一组用于块，一组用于内联内容。

考虑到 display:none 和 display:initial 在非 IE 浏览器中运行良好（在 Windows、Mac、Android 和 iPhone 上测试了 firefox/chrome/safari）时，这是没有意义的。

最后，我发现使用 jQuery $(".class").hide() 和 $(".class").show() 在页面加载后最初运行的函数中处理此问题要容易得多，然后从窗口调整大小事件处理程序重新调用。