web-dev-qa-db-fra.com

Affichage: initiale pour Internet Explorer

J'ai créé un site Web qui fonctionne parfaitement dans Google Chrome et Firefox, mais lorsque je l'exécute dans Internet Explorer, je rencontre des problèmes.

Donc, j'ai 2 diaporamas sur ma page d'index, mais un seul devrait montrer à une résolution d'écran spécifique. J'ai créé des requêtes multimédias afin de pouvoir définir un display:none; pour le diaporama dont je n'ai pas besoin à cette résolution. Et pour le faire réapparaître, j’utilise display:initial; mais Internet Explorer ne prend pas en charge cette commande.

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

PS: L’utilisation de visibility:hidden; n’est pas une option car elle ne devrait pas réserver d’espace.

Si vous pouvez m'aider, répondez s'il vous plaît .. Si vous ne le pouvez pas, je vous remercie de l'avoir lu.

Voici venu du code; cela pourrait aider (je ne suis pas sûr de savoir comment poster 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>

Voici ce que je fais sur le plus 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 média min: 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;
}

requête multimédia 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;
}

requête multimédia 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 j'ai fournies sont utiles.

ContainerGrotePage est le grand diaporama, BTW et pageklein est le petit… .. Je parle le néerlandais, donc certains noms pourraient ne pas avoir de sens pour les anglophones. :)

Merci d'avance les gars!

cssinternet-explorerslideshowdisplaytagdisplayobject
16
user3588913

Cela fonctionne dans un fichier css, si vous devez définir initial (les deux lignes):

affichage: en ligne;

affichage: initial;

8
Klas

J'ai trouvé une solution qui vous permet de le faire dans IE et Chrome. Ici , défiler vers le bas.

L'histoire courte, IE n'accepte pasdisplay = "initial". Donc, le truc est de le faire avec display = "" à la place. C'est à dire.,

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

Avait ce même problème, et display: block ou display: inline affichera le contenu dans IE. Cependant, nous utilisions des classes pour masquer/afficher le contenu de la mise en page de manière réactive et aurions dû disposer de 2 ensembles de classes, un pour le bloc et un pour le contenu en ligne. 

Cela n’avait aucun sens lorsque l’on prend en compte display: none et display: initial convient parfaitement aux navigateurs non-IE (testé firefox/chrome/safari sous Windows, mac, Android et iPhone).

En fin de compte, jQuery $ (". Class"). Hide () et $ (". Class"). Show () ont été beaucoup plus faciles à utiliser dans une fonction exécutée initialement après le chargement de la page, puis rappelé à partir d'un gestionnaire d'événements de redimensionnement de fenêtre. 

1
user3754328

Vous pouvez simplement utiliser l'attribut hidden:

a.setAttribute('hidden', '')
b.removeAttribute('hidden')

Il est pris en charge par tous les principaux navigateurs, y compris IE11. Pour obtenir le support IE10, vous avez besoin de deux lignes CSS:

[hidden] {
  display: none;
}
0
Philipp Ryabchun