Soluciones a los problemas de visualización en Internet Explorer

También te podría gustar...

Sobre este artículo

Licencia: Licencia: Eres libre de distribuir este artículo bajo los términos de la licencia creative commons, siempre que pongas claramente el siguiente texto en la página que publica el artículo (enlaces activos incluidos) y conserves los enlaces dentro del texto:

URL: Soluciones a los problemas de visualización de las web en Internet Explorer

Se dedica desde hace más de 8 años al diseño web y muy especialmente al front-end. Apasionada de Internet y los proyectos online. Sigue muy de cerca todo lo que se cuece en cuanto a emprendimiento. Ha trabajado como front-end y visual designer para empresas como ELPAIS, Banco Santander y actualmente Tuenti.

42 Respuestas

  1. Pedro

    Gracias, muy buenos aportes.

  2. Juan

    andres.tilo ¿Has podido solucionar el problema para que funcione con los FRAME?

    Saludos.

  3. Daniel

    Buenas tardes, se que el artículo fue publicado mucho antes que que yo decidiera estudiar programación, ahora la cuestión es la siguiente, siendo que internet explorer ya va en la versión 11 tengo problemas de vista de algunos estilos, no se cual puede ser la causa si se supone que para ie 10 y 11 no iba a tener problemas por ende necesito ayuda porque tengo problemas con la página de la empresa y me tienen colgado. Agradezco una pronta pero muy pronta ayuda. Gracias

  4. cristhian

    veronika podria explicar unh poco mas al detalle el punto de los condicionales … gracias

  5. andres.tilo

    yo tengo este estilo y me funciona muy bien con mozzilla chorme opera pero explorer 10 no como hago para que sea compatible, les agradezco
    Nota: el funciona bn en el index pero cuando abro una frame no pailas.
    .menu
    {
    width: 100%;
    margin: 0;
    padding: 2px 0 0 0;
    list-style: none;
    background-color: #014187;
    background: -moz-linear-gradient(#5085E7, #014187);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #014187),color-stop(1, #5085E7));
    background: -webkit-linear-gradient(#5085E7, #0159BA);
    background: -o-linear-gradient(#5085E7, #014187);
    background: -ms-linear-gradient(#5085E7, #014187);
    background: linear-gradient(#5085E7, #014187);
    /*-moz-border-radius: 50px;
    border-radius: 50px; */
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
    }

    .menu li
    {
    float: left;
    padding: 0 0 10px 0;
    position: relative;
    line-height: 0;
    }

    .menu a
    {
    float: left;
    height: 25px;
    padding: 0 20px;
    color: #fff;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
    }

    .menu li:hover > a
    {
    color: #fafafa;
    }

    *html .menu li a:hover /* IE6 */
    {
    color: #fafafa;
    }

    .menu li:hover > ul
    {
    display: block;
    }

    /* Sub-menu */

    .menu ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #5085E7;
    background: -moz-linear-gradient(#5085E7, #014187);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #5085E7));
    background: -webkit-linear-gradient(#5085E7, #014187);
    background: -o-linear-gradient(#5085E7, #014187);
    background: -ms-linear-gradient(#5085E7, #014187);
    background: linear-gradient(#5085E7, #014187);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);
    -moz-border-radius: 5px;
    border-radius: 5px;
    }

    /*agregada*/
    .menu ul ul
    {
    top: 0;
    left: 100%;
    }

    .menu ul li
    {
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    }

    .menu ul li:last-child
    {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }

    .menu ul a
    {
    padding: 10px;
    /*height: 10px;*/ /*agregada*/
    height: auto;
    /*width: 130px;*/ /*agregada*/
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    }

    *html .menu ul a /* IE6 */
    {
    height: 10px;
    /*width: 150px;*/
    }

    *:first-child+html .menu ul a /* IE7 */
    {
    height: 10px;
    /*width: 150px;*/
    }

    .menu ul a:hover
    {
    background: #0186ba;
    background: -moz-linear-gradient(#04acec, #0186ba);
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec, #0186ba);
    background: -o-linear-gradient(#04acec, #0186ba);
    background: -ms-linear-gradient(#04acec, #0186ba);
    background: linear-gradient(#04acec, #0186ba);
    }

    .menu ul li:first-child > a
    {
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    }

    .menu ul li:first-child > a:after
    {
    content: ”;
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #fff;
    }

    /* agregada */
    .menu ul ul li:first-child a:after
    {
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #fff;
    }

    .menu ul li:first-child a:hover:after
    {
    border-bottom-color: #04acec;
    }

    .menu ul ul li:first-child a:hover:after
    {
    border-right-color: #04acec;
    border-bottom-color: transparent;
    }

    .menu ul li:last-child > a
    {
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    }

    /* Clear floated elements */
    .menu:after
    {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ” “;
    clear: both;
    height: 0;
    }

    *html .menu { zoom: 1; } /* IE6 */
    *:first-child+html .menu { zoom: 1; } /* IE7 */

    #encabezado
    {
    width:100%;
    height:78px;
    }

  6. JOSE LUIS

    Una curiosidad …
    Aplico el reseteado y todo va bien, pero tengo otro problema.
    Tengo una especie de Intranet en una carpeta de una unidad de red. No la sirve un servidor sino que simplemente está en una unidad de red donde acceden los usuarios con un acceso directo.
    El caso es que si se ejecuta en Internet Explorer, se interpretan solo ALGUNOS estilos CSS.
    Si la carpeta de esa Intranet se copia a cada C: y se lanza de nuevo (tb. en IE) se interpretan bien TODOS los estilos.
    ¡Es rarísimo! 2 comportamientos distintos en los mismos PCs, SOs y exploradores con la diferencia de si la carpeta está en C: o en V:
    El pertinente fichero CSS se lee en todos los casos porque hay estilos que sí se aplican.
    ¿Alguna idea de por qué?
    El S.O. es Windows 7 (32 bits) y el I.E. es la versión 11.
    Con Chrome y Firefox funciona siempre bien e igual en cualquier caso.
    ¡Muchas gracias!

  7. josep

    dentro del ie7.css que va el codigo del reset

  8. Jesus

    amigo lo que dices es cierto. Yo no me complique solo pongo un mensaje de que es recomendable visitarnos de otro explorador.

  9. Alex

    Excelente post muchas gracias Verónica es info muy muy útil.

  10. EDER

    Saludos Vero:

    Tengo un problema con la visualización de un menu. Hice un CSS especial para IE7 y el General para los demás exploradores. Todo esta bien pero me he dado cuenta que el CSS general esta afectado al que hice para IE7. Principalmente en la visualización de un menu que hace que aparezca encimado. Lo curioso es cuando le quito el CSS general y dejo solo el de IE7 se ve perfecto.

    ¿Porque el CSS general esta afectando a la visualización del menu en IE7? Puse el comentario para IE7 tal y como viene explicado aqui, antes del CSS general, etc

    Espero me ayudes. gracias

  11. JACKIE

    Impecable y super claros todos los datos y soluciones Gracias

  12. Emerre

    Hola Verónica. No conseguía solucionar que mi página se viese ni medio bien con Explorer, y gracias a tu post lo he conseguido. Estoy flipando de lo fácil que me ha resultado.
    Muchas gracias por tus explicaciones, es fabuloso que haya gente como tú.
    Un saludo.

  13. Xan

    Hola Verónica, hace mucho tiempo que escribiste este post, pero yo lo encontré hoy y SOLUCIONÉ mis problemas con la web. Ahora se ve de maravilla en todos los exploradores. Eres mi heroina!!!. Fue tan sencillo como subir la hoja para IE ANTES de la normal. La tenía más abajo. MUCHAS GRACIAS.

  14. Diego Asturias

    Excelente post! Es cierto que es muy triste que a estas alturas los diseñadores web tengamos que seguir sufriendo la incompetencia el explorer. Puede que los condicionales sean lo mas practico para solicionar errores en versiones diferentes del ie.

  15. Kokoro

    Buenas amigos, una pregunta porque existe dos versiones o tipos de:

    IE7.js
    Actualiza MSIE5.5-6 para ser compatible con MSIE7.

    IE8.js
    Actualiza MSIE5.5-7 para ser compatible con MSIE8.

  16. Laura

    ups! no sale el comentario, pero es el primero de todos el que dice: if IE

    Probé poniendole IE 9 pero tampoco :(

  17. Laura

    Encontré tu artículo buscando una solución a esto de IE, ya probé poniendo los comentarios condicionales, pero IE no me reconoce la hoja de estilos que le asigno :( Lo pongo tal cual aquí los explicas (claro cambiando la ruta de mi hoja de estilos) pero nada.

    No tengo ningún problema con Firefox, Chrome, Safari u Opera, el problema viene con IE9 que no reconoce ni la hoja de estilos gral y mucho menos la que le asigno con el método que brindas.

    ¿Con este comentario no importa que versión de IE sea?

    Lo curioso es que tengo una web que construí hace unos meses y aún no usaba mucho las hojas de estilo, así que todos los estilos están asignados dentro de cada html y solo así explorer reconoce los estilos. Con las hojas de estilo reconoce fondo, fuente, etc, pero me ignora sobre todo losvalores de margenes y otras pocas cosas.

    No sé si tenga que ver el programa que uso (dreamweaver) o que soy usuario mac, pero es una tontería, me desquicia IE :(

    Muchas gracias, espero me puedas ayudar un poco.

  18. Héctor

    Gracias por el aporte, me soluciono el cacho…

    Gracias.

  19. jamape

    Hola! Muy interesante el artículo, me va a ser de gran utilidad!

    Es muy necesario/recomendable realizar el reset? Cuales son los mayores problemas de no utilizarlo?

    Gracias de antemano.

    • Verónica Milán

      Te recomiendo que lo uses por costumbre en cada web que hagas. El reset te permite poner a cero todos los estilos que vienen por defecto de los navegadores, porque incluso cuando todavía no has dado estilos a nada, cada navegador tiene por defecto estilos predeterminados para cosas como los encabezados, márgenes, etc.

      Con el reset eliminas problemas de compatibilidad entre navegadores, si no lo usas vas a tener más problemas de los necesarios para hacer que tu web se vea bien en los distintos navegadores. Así que sí, en mi opinión es necesario.

  20. Miguel

    vemos que ah pasado algun tiempo y casi esta desaparecido. QEP

    jaja XD

    y bueno han probado Chrome
    no necesita tanto de algunos plugins odiados ! :D

  21. Antonio

    Verónica, he conseguido hacer que me lea la hoja alternativa pero… ahora ya no me lee la otra para firefox :(

    he puesto esto:

    y ahora genial, tengo el explorer bien, pero el firefox mal… cómo se hace porfiii, no será por no intentarlo…

  22. Antonio

    No lo consigo :(
    Pongo el comentario entre el head, pero no me lee el css que he creado…sólo hace caso al normal…
    De todas formas, muchísimas gracias por poner esto, por que me estaba desesperando, imagino que cuando lo consiga, será algo bastante fácil :)

  23. Felix

    Muchísimas gracias, me estaba volviendo loco!

    funciona perfectamente en ie6 y ie7

    gracias
    Felix

  24. Ana

    Ahora aclarado. Muchas gracias de nuevo!

  25. Ana

    Una pregunta más, Verónica. Por lo que voy entendiendo, p.e. si en el id header en IE 7 (por ejemplo) se vé mal, dices que entonces se cree una css especial para ese navegador. ¿Quieres decir que se haga “a pelo” según se vea en uno u otro? es decir, suponiendo que en IE 7 se vea muy estrecho, crear una css especial para el IE 7 haciéndolo más amplio “a pelo” (con un href concreto para él), y si (por ejemplo) en IE 6 se vé más amplio, crear otra css especial para el IE 8 haciéndolo más estrecho “a pelo” (con otro href concreto para ese), y así sucesivamente?
    Espero perdones mi analfabetismo pero recién empiezo y he de entregar algo! Un abrazo.

  26. Ana

    Ups, creo que estoy algo confusa… El “reset” se coloca en el documento html o en la css?
    Y los comentarios especiales para IE se colocan en una css especial para IE, o en el html? Aghhh :)

    • Verónica Milán

      :) jeje no te preocupes Ana, al principio cuesta aclararse. Por partes:

      El reset se coloca en el css, y va lo primero de todo, antes de empezar a declarar propiedades de la página.

      Los comentarios condicionales van en el html, la idea es enlazar a una hoja de estilos externa, como se hace normalmente dentro del html, pero meter esa hoja de estilos dentro de los comentarios condicionales para que sólo acceda a ella Internet Explorer.

      La idea de los comentarios condicionales es más o menos como dices, “a pelo”, pero claro, no te lies tampoco a poner hojas de estilo para cada explorador… si está bien maquetado posiblemente sólo te haga falta tocar cosas para ie6, y tal vez algo para ie7, pero no abuses de esto porque tampoco es el sentido. La idea es recurrir a ello cuando no hay manera de lograr crossbrowsing con la hoja de estilos general.

      Saludos.

  27. Ana

    Verónica, los comentarios condicionales ¿se ubican “dentro de las etiquetas” significa dentro del Head?
    Se pueden pegar tal cual los ponéis aquí, “y ya está”? Y luego proceder normalmente?
    Gracias y un saludo cordial.

    • Verónica Milán

      Ana,

      Sí, van dentro de las etiquetas <head> y </head> como la hoja de estilos normal (voy a modificar el artículo porque me comí esa parte), y el código es tal cual, acordándote de poner la ruta donde se encuentra tu archivo css… después, todo lo que especifiques en esa hoja de estilos sólo será leído por Internet Explorer.

      Suerte! ;)

  28. beleita

    Yo sigo prefiriendo usar una sóla CSS para todos los navegadores (se puede hacer compatible para todos), porque si luego hay que actualizar el site o hacer cambios es menos complicado. Sobre todo para webs grandes.

    • Verónica Milán

      Cuestión de preferencias de organización supongo, a mí me es más fácil separar de esa manera y cuando tengo que retocar código busco más rápidamente. Lo que sí es cierto es que con los años la hoja de estilos para Internet Explorer se hace cada vez más pequeña ;)

  29. Diseño Coral

    Como desarrolladores web, ya hace tiempo que no teniamos en cuenta al E6 es increible el ritmo de cambios que está adquiriendo esto.

  30. Diseño web valencia

    Ie6 aun representa un porcentaje de visitantes importante a tener en cuenta.
    Nos costará aun librarnos de este problematico explorador.

    Un saludo.

  31. Verónica Milán

    Bueno, yo reviso con frecuencia las estadísticas de uso de navegadores y por suerte la tendencia es a desaparecer el uso de ie6… nos está costando una década librarnos de él, pero la gente está renovando sus aplicaciones. Y es que son demasiados avisos muchos de grandes compañías, incluso el propio Microsoft recomienda actualizar a versiones reciente de Internet Explorer.

    Así que de momento, tendremos que seguir lidiando con él sí, pero dentro de un tiempo será un navegador de uso minoritario.

    Por cierto, el soporte para css3 de ie9 (que está en desarrollo) está muy mejorado :) ya era hora que los de Microsoft se empezaran a poner las pilas.

  32. Tarot amor

    Estoy contigo.

    Creo que firefox es el mejor pero por lo menos el 75% de la gente utiliza el explorer y hay que adaptarse a él.

    Y eso que firefox ofrece mil y una herramientas impresionantes.

    Saludos

  33. Nestor C. Pool

    Excelente articulo y excelente recurso web, actualmente estoy lidiando con el problema del odiado IE5 (Lo odio completamente) a causas de el mis visitas estan por el suelo, pero gracias a esta informacion tratare de mejorar mi diseño y ver como me va mejor.

  34. diseño web valencia

    Hola Verónica.
    Lo que comentas es muy bonito y yo lo comparto.
    El problema, es que tenemos que ser realistas y que pese a que cada vez más gente utiliza otro tipo de navegadores, sobre todo Firefox, la mayoría utiliza el explorer, y sobre él debemos de trabajar.

    Yo también me vuelvo loco a la hora de diseñar un sitio compatible con todos los navegadores, pero pese a que ¿odiemos? internet explorer, es el rey, y no hay más.

    Por cierto, firefox, una pasada los plugins que ofrece tanto a desarrolladores como a seos, y por otra, voy a probar rapidamente la herramienta que comentas para ver las webs en distintas versiones del explorer.
    conocía otras, pero esta en concreto no.

    Gracias y saludos

  35. desarrollo de páginas web cancún

    Gracias Microsoft por desauciar al odiado IE6. Ese maldito explorador solo hace quedar mal a los desarrolladores web que trabajamos con Mac.

Deja un comentario

El email no se publica. Todos los campos obligatorios.