我在Google Chrome和Firefox中制作了一个很好的网站,但是当我在Internet Explorer中运行它时遇到问题.
所以,我的索引页上有两个幻灯片,但只有一个应该以特定的屏幕分辨率显示.我创建了一些媒体查询,所以我可以设置一个显示:none;到幻灯片我不需要那个决议.并让它再次出现我使用display:initial;但Internet Explorer不支持该命令.
我需要一种方式来显示我不可见的显示:无;在Internet Explorer中.
PS:使用可见性:隐藏;不是一个选项,因为它不应该保留空间.
如果可以帮我,请回覆.
如果你不能感谢你阅读这个.
这里是代码的来临这可能有帮助(我不知道如何正确发布,抱歉):
<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是小的幻灯片.
我说荷兰语,所以有些名字可能对英语人士没有意义. 原文链接:https://www.f2er.com/css/216372.html