Дисплей: начальный для Internet Explorer

Я создал сайт, который отлично работает в 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 - это маленькое. Я говорю по-голландски, поэтому некоторые имена могут не иметь смысла для англоговорящих.:)

Спасибо заранее, ребята!

Ответы

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