Affichage initial: pour internet explorer

J'ai fait un site web qui fonctionne très bien sous Google Chrome et Firefox, mais quand je le lance dans Internet Explorer, je suis confronté à des problèmes.

Donc, j'ai 2 diaporamas sur ma page index, mais un seul doit afficher sur un écran de résolution. J'ai créé certaines des requêtes de média, donc je pourrais être un display:none; pour le diaporama, je n'ai pas besoin à cette résolution. Et pour la faire apparaître de nouveau-je utiliser display:initial; mais Internet Explorer ne prend pas en charge la commande.

J'ai besoin d'un moyen de rendre visible ce que j'avais invisible avec display:none; dans Internet Explorer.

PS: à l'Aide de visibility:hidden; est pas une option, car il ne devrait pas réserver de l'espace.

Si vous pouvez m'aider, s'il vous plaît répondre.
Si vous ne pouvez pas je vous remercie pour la lecture de ce de toute façon.

Voici venir du code; il peut aider (je ne suis pas sûr de la façon de comptabiliser correctement, désolé):

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

C'est ce que je fais sur le petit écran :

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

première requête de média min:440

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

media query min: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;
}

media query min:715px

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

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

#slider li {
    list-style:none;
}

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

J'espère que les informations que je fournis est utile.

ContainerGrotePage est le grand diaporama, BTW et pageklein est la petite.
Je parle le néerlandais, de sorte que certains noms ne pourrait pas faire de sens pour les locuteurs de l'anglais. 🙂

Merci d'avance les gars!

OriginalL'auteur user3588913 | 2014-04-30