para - title html css

Pantalla: inicial para internet explorer

Question

He creado un sitio web que funciona bien en Google Chrome y Firefox, pero cuando lo ejecuto en Internet Explorer tengo problemas.

Por lo tanto, tengo 2 presentaciones de diapositivas en mi página de índice pero solo una debe mostrarse en una resolución de pantalla específica. Creé algunas consultas de medios para poder configurar una display:none; a la presentación no necesito a esa resolución. Y para que vuelva a aparecer, uso display:initial; pero Internet Explorer no admite ese comando.

Necesito una forma de hacer visible lo que tenía invisible con la display:none; en Internet Explorer.

PD: Utilizando visibility:hidden; No es una opción porque no debe reservar el espacio.

Si puedes ayudarme, por favor responde. Si no puedes, te agradezco por leer esto de todos modos.

Aquí viene el código; podría ayudar (no estoy seguro de cómo publicar correctamente, lo siento):

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

Esto es lo que hago en la pantalla más pequeña:

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

Primera consulta de medios 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;
}

consulta de medios 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;
}

consulta de medios min: 715px

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

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

#slider li {
    list-style:none;
}

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

Espero que la información que proporcioné sea útil.

ContainerGrotePage es la gran presentación de diapositivas, BTW y pageklein es el más pequeño. Hablo holandés, por lo que algunos nombres pueden no tener sentido para hablantes de inglés. :)

Gracias de antemano chicos!

Answer 1

Encontré una solución que te permite hacerlo en IE y Chrome. Here , desplácese hasta el fondo.

En pocas palabras, IE no acepta display = "initial" . Así que el truco es hacerlo con display = "" lugar. Es decir,

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

Answer 2

Esto funciona en un archivo css, si necesita establecer inicial (ambas líneas):

pantalla: en línea;

pantalla: inicial;

Answer 3

Solo puedes usar el atributo hidden :

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

Es compatible con todos los principales navegadores, incluido IE11. Para obtener soporte para IE10, necesitas un par de líneas CSS:

[hidden] {
  display: none;
}

Answer 4

Tuvo este mismo problema, y ​​muestra: bloque o pantalla: en línea mostrará el contenido en IE. Sin embargo, estábamos usando clases para ocultar / mostrar el contenido del diseño de forma responsiva y habríamos necesitado tener 2 conjuntos de clases, una para el bloque y otra para el contenido en línea.

Eso no tenía sentido al considerar esa pantalla: ninguna y pantalla: la inicial funciona bien en navegadores que no son de IE (prueba de Firefox / chrome / safari en Windows, Mac, Android y iPhone).

Al final, me resultó mucho más fácil usar jQuery $ (". Class"). Hide () y $ (". Class"). Show () para manejar esto dentro de una función que se ejecutó inicialmente después de que se cargue la página, luego se vuelve a llamar desde una ventana cambiar el tamaño del controlador de eventos.