我已经创建了一个在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;
}
媒体查询最小值: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是小型的。 我说荷兰语,所以有些名字可能对说英语的人没有意义。 :)
先谢谢你们!
答案 0 :(得分:9)
我找到了一个允许您在IE和Chrome中执行此操作的解决方案。 Here,滚动到底部。
长话短说,IE doesn't accept display = "initial"
。所以诀窍就是用display = ""
代替它。即,
if(...){
a.style.display = "none";
b.style.display = "";
}
else{
a.style.display = "";
b.style.display = "none";
}
答案 1 :(得分:1)
有同样的问题,并显示:阻止或显示:内联将显示IE中的内容。但是,我们使用类来响应地隐藏/显示布局内容,并且需要有两组类,一组用于块,一组用于内联内容。
在考虑显示时没有意义:none和display:initial在非IE浏览器中工作正常(在windows,mac,android和iPhone上测试过firefox / chrome / safari)。
最后,我发现使用jQuery $(“。class”)。hide()和$(“。class”)。show()更容易在最初运行的函数中处理这个问题。页面加载,然后从窗口调整大小事件处理程序重新调用。
答案 2 :(得分:0)
您可以只使用hidden
属性:
a.setAttribute('hidden', '')
b.removeAttribute('hidden')
包括IE11在内的所有主要浏览器都支持它。要获得IE10支持,您需要几行CSS行:
[hidden] {
display: none;
}