div - title html css

¿Cómo lidiar con Internet Explorer? (20)

Soy consciente de que probablemente haya otras preguntas con respecto a este tema. Supongo que cada desarrollador web pasa por esto con IE.

Mi problema:

Estoy desarrollando una aplicación basada en web completamente basada en Javascript. Soy un usuario de Mac. Estaba realmente feliz de que todo funcionara muy bien en Safari, Firefox y Opera. Luego le pedí a un amigo de Windows que lo comprobara con Internet Explorer, y las cosas tampoco funcionan. Mi aplicación es muy sensible a los estándares HTML.

El problema principal es el diseño de CSS. El JavaScript parece funcionar correctamente gracias a jQuery para la portabilidad.

Mi pregunta:

¿Cómo lidiar con Internet Explorer? ¿Debo crear un nuevo CSS que solo esté cargado en Internet Explorer? ¿Debo crear una nueva versión de la aplicación solo para Internet Explorer? ¿Cómo manejas esto normalmente? La aplicación es bastante grande tanto en diseño de características como en diseño de diseño.

Editar:

Al utilizar el restablecimiento de CSS sugerido por Nosredna, ya eliminé casi la mitad de los problemas. Supongo que realmente es una buena práctica. Me di cuenta de que SO también lo usa.

¿Especifica un doctype válido? Puede hacer que Internet Explorer sea un poco más compatible al cambiarlo al modo estándar. http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic2

¿Utiliza un archivo CSS para restablecer el navegador? Eso puede ayudar a unir las versiones. http://meyerweb.com/eric/tools/css/reset/

Tenga en cuenta los errores de CSS de IE: http://www.positioniseverything.net/explorer.html

Para conocer el esquema de su diseño, considere utilizar el marcado que se sabe que funciona, como http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts o http://960.gs/ para líquido o fijo diseños, respectivamente.

Manténgase al día con las diferencias de JavaScript entre los navegadores. jQuery maneja algunos de ellos, pero no todos. http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/

Sí, IE es un dolor. Si quieres que funcione en IE, realmente quieres probar en IE cada dos días. No desea guardar el dolor para el final; desea manejar las pesadillas de a una por vez.

Por cierto, si crees que IE es un problema, prueba mirar tu página con un teléfono móvil. El otro día fui a REI.com con un iPhone y el quinto medio o más de la pantalla fue ocupado por un montón de etiquetas ilegibles que se procesaron como texto.

Antes que nada, no espero hasta que el proyecto finalice para considerar la compatibilidad del navegador.

La mayor parte del tiempo para los problemas de CSS hay formas de hacer cosas que no requieren que se carguen las hojas de estilo específicas del navegador, por lo que trato de usar esas soluciones siempre que sea posible. Por ejemplo, si la mayoría de sus problemas están relacionados con problemas del modelo de caja, cosas como el uso de divs anidados en lugar de relleno pueden ayudar a garantizar que todo se vea correcto sin la necesidad de hojas de estilo y plantillas separadas para diferentes navegadores.

Aquí es cómo trato de reducir el dolor de lidiar con IE:

Use un reset.css - Yahoo! Restablecimiento de YUI o http://meyerweb.com/eric/tools/css/reset/
Tenga cuidado con los flotadores, despeja, generalmente causan muchas maldiciones.
Tenga en cuenta los errores de hasLayout en IE, que suelen agregar un zoom: los atributos 1 o alto ayudan a solucionar esto. Leer en tener diseño .
Haz que el diseño funcione en Firefox, Safari, Chrome, etc., mientras mantienes IE alrededor del 80% del camino hasta allí.
Implemente un estilo IE6.css y un estilo IE7.css si es necesario usando comentarios condicionales.
Cerveza, licor u otras bebidas para adultos.

Como último recurso, cuando ajustar el CSS simplemente no arregla las cosas, me gusta usar el script selector de CSS de Rafael Lima . Si bien depende de JavaScript (la mayoría de los sitios que construyo lo hacen de todos modos), proporciona una forma conveniente de ajustar CSS para diferentes navegadores y versiones sin hojas de estilo separadas.

Tu puedes tener :

.someClass { margin-left:1px } .ie6.someclass { margin-left:2px }

Como nosredna dijo, use un doctype válido (vea http://www.alistapart.com/articles/doctype/ ) Luego verifique su sitio web en el validador w3c ( http://validator.w3.org/ ). Si no muestra errores (o solo unos pocos), IE debería renderizarlo correctamente.

No me esforzaría mucho para hacerlo compatible con IE6, y simplemente aceptaré el hecho de que un sitio web puede verse diferente en varios navegadores.

Con IE obteniendo alrededor del 65% del tráfico , no creo que pueda pensar en eso como una idea tardía.

Creo que desarrollar un nuevo archivo CSS para su uso en IE sería considerablemente más fácil que volver a escribir su aplicación, pero no sé qué escala y alcance tiene su aplicación, lo que incluso representaría una considerable opción. Supongo que puede depender de las versiones de IE que quieras admitir.

Estamos en un punto ahora que la mayoría de los usuarios deberían haber migrado completamente de IE6. IE7 sigue siendo una molestia, pero no fue tan malo como 6. Con mis proyectos, la configuración predeterminada que vendo es la compatibilidad de IE7 con el código para dirigir a los usuarios de IE6 y de abajo a actualizar. Si un cliente quiere que incorpore la compatibilidad de IE6 en un sitio, normalmente aumento el precio cotizado en un 50% debido a cuán terrible es el dolor de cabeza para soportar el navegador y la cantidad de código visual adicional que se debe escribir para que funcione.

Creo que estaría bien escribir un archivo css específico para IE. Sé que es un problema, pero debido a algunos problemas de posicionamiento, IE6 se ve diferente a todas las otras browswers.

Use esta línea para su archivo css recién creado:

Dejo que otros resuelvan los problemas por mí. Utilizo los excelentes archivos CSS de Yahoo incluidos en su biblioteca YUI. Tienen un archivo para eliminar el formato existente para las etiquetas existentes (por ejemplo, H1 en IE no se parece a H1 en Firefox), tienen otro para darme un conjunto predeterminado de formato que se ve igual en todos los navegadores, tienen otro para estandarizar tamaños de fuente, y lo más importante de todos ellos es su archivo de cuadrícula. Me da la capacidad de crear un formato jerárquico de regiones y subregiones en la página de forma rápida y fácil, y sé que funcionará en cualquier navegador moderno importante (Yahoo lo prueba todo para asegurarse de que lo haga).

Puede que no sea la solución perfecta, pero ha sido más que suficiente para mis necesidades.

El navegador se reinicia para comenzar. Nivele el campo de juego tanto como sea posible y elimine los valores predeterminados del navegador. Construye tu CSS desde cero. (Ver: http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/ )

Haga una prueba temprana y con frecuencia en todos los navegadores principales durante el desarrollo.

Intente lograr tanto como sea posible sin hacks específicos del navegador. A veces tendrá que trabajar en un CSS específico del navegador, pero debe validarlo (utilice la herramienta Validación del W3C). A veces, aunque no hay nada más que un condicional (y tal vez incluso un poco de JavaScript), por ejemplo, corregir PNG transparentes en IE6 (Ver: http://nettuts.com/videos/screencasts/5-easy-ways-to-tackle-ie6s-transparency-issues/ ).

Si no puede ejecutar IE en una de sus máquinas de desarrollo, intente http://browsershots.org . Al menos puedes obtener algunos comentarios de esta manera.

Use un debug.css que resalte o resuma divs y otros elementos. Mezcle esto en su cabeza de HTML si es necesario durante el desarrollo. Esto puede ser una gran ayuda.

Use "barras de herramientas del desarrollador" cuando estén disponibles (IE, Firefox).

ESPERE QUE EL IE VA A SER UN DOLOR, Y PROBAR EN 6, 7 y 8.

¡Que te diviertas!

En general, trato de hacer todo lo que pueda sin hacer un archivo CSS separado para IE. Usaré el formato condicional para orientarlo específicamente si es necesario. Sin embargo, en general, a lo más necesitarás hacer una hoja de estilo de IE solo para que funcione.

Solo asegúrese de estar probando con las versiones correctas de IE para su audiencia, ya que IE 6, 7 y 8 son bastante comunes.

Lo elimino

Mantenga el marcado lo más simple posible. Haga pequeños cambios. Prueba cada cambio

Me aseguro de que mis sitios web funcionen de forma nativa y perfecta en ie9, y trabaje en ie8 (posiblemente con funciones faltantes). Solicito a todos los que usan una versión anterior que obtengan un marco cromado. Nunca pierdo el tiempo por 7 años o más, porque usar un navegador de 6 años es patético y no se debe alentar.

Normalmente hago todo lo que puedo para evitar tener que crear un archivo CSS por separado. Hay muchos trucos y consejos de CSS y HTML que deberían permitirle trabajar en IE6 y versiones posteriores, así como en cualquier otro navegador común. Solo lleva tiempo descubrirlo todo. Desafortunadamente, a veces con diseños complicados puede tomar mucho tiempo, especialmente cuando no lo prueba sobre la marcha.

Primero, lea On Having Layout , que explica cómo funciona el motor de renderizado IE internamente. El motor de renderizado de IE es anterior a CSS. No distingue adecuadamente entre los elementos en línea y los bloques como es de esperar. En cambio, en IE un elemento tiene Layout. O no. Esta es la fuente del 99% de los errores de CSS de IE. Entonces, lea ese artículo un par de veces.

En cuanto a las correcciones, generalmente uso comentarios condicionales. Muchas rasones:

Son a prueba de futuro, a diferencia de los hacks de CSS. ¿Qué pasa si IE9 corrige el truco pero no el error que está usando para resolverlo?
Es válido (X) HTML (los comentarios condicionales son simplemente comentarios para todos los demás)
No requiere javascript. Te sorprendería saber cuántas personas han desactivado JavaScript.

Un comentario sobre los comentarios condicionales: nunca use una coincidencia abierta. Es decir, nunca haga algo como:

 

La razón es la misma que la de los hacks: hacer que sea a prueba de futuro. ¿Qué pasa si la próxima versión de IE corrige el error y ya no necesita las correcciones? O, lo que es peor, ¿la "solución" ahora realmente arruina tu diseño en la nueva versión de IE? Por lo general, es mejor suponer que la próxima versión de IE ha solucionado el error por el que está trabajando. He escrito un poco sobre eso cuando IE 8 estaba en el horizonte.

Sé que esto puede caer en la categoría ''muy poco, demasiado tarde''. Dicho esto, invertiría en VMWare o Parallels y crearía una VM de Windows con IE6.

A medida que se desarrolla, debe verificar incrementalmente su progreso en los navegadores que le interesan.

Dicho esto, con una aplicación existente, primero me aseguraría de que mi HTML fuera válido (hay una gran variedad de servicios de validación a su disposición) y luego, según el diseño, fui seccionado por sección para obtener el diseño correcto. , usando comentarios para ''ocultar'' las secciones en las que no estás trabajando activamente.

Tuve el mismo problema en mi programa de desarrollo: IE6, FFetc + LAMP + MVC personalizado, basado en el artículo de Rasmus Lerdorf cuando sugirió que noMVC-como manejarlo incluye para encabezados, pies de página y el género. Codifiqué CSS, me quedé atrapado con FF y no lo renderé bien. Tuve que revisar mi conocimiento de CSS: descubrí que una sola implementación de CSS puede mostrarse correctamente en std. modo compatible (FF) e IE6. Me gusta eso. Me complació manejar cualquier cambio usando un único archivo CSS. Mi consejo:

Sé que tienes una Mac, salgas a la venta de garaje (los periódicos te dirán dónde están), obtén una PC vieja por $ 10 (hasta ahora he encontrado bastante). Esto te dará la oportunidad de probar IE6 temprano, mientras que obtienes un interruptor KVM para acceder a la máquina cuando lo necesites.
Una de las cosas que me he vuelto adicto es la configuración de IE6: deshabilite todas las secuencias de comandos ActiveX, de todos modos, navegue por la web sin anuncios, pruebe su aplicación con y sin la configuración de ActiveX y compruebe qué tan bien funciona su sitio. Esto, literalmente, me ha ahorrado horas de momentos "dolorosos" que la gente mencionó anteriormente.
Usted prolly sabe cómo probar FF / Opera / Safari con y sin secuencias de comandos
Finalmente, independientemente de cuán pesado sea el uso de Javascripting en su sitio, asegúrese de que las características principales (de las cuales estoy seguro que tiene mucho) se carguen correctamente.

No soy un experto, pero seguro espero que mis comentarios te ayuden un poco.

Cheery-O

Comentarios condicionales

    <link rel="stylesheet" href="normal.css"> 

En los archivos IE, puede usar @import para importar normal.css , y luego anular los estilos según sea necesario.

<script> if (internetExplorer) { window.location = "http://getfirefox.com"; } </script>