css – 显示：初始为Internet Explorer

我在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是小的幻灯片.
我说荷兰语,所以有些名字可能对英语人士没有意义.

css – 显示：初始为Internet Explorer

相关文章