¿Cómo se maneja Internet Explorer?

Comentarios condicionales.

<!--[if IE 6]>
  <link rel="stylesheet" href="ie6.css">
<![endif]-->
<!--[if IE 7]>
  <link rel="stylesheet" href="ie7.css">
<![endif]-->
<!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css">
<![endif]-->
<!--[if !IE]-->
  <link rel="stylesheet" href="normal.css">
<!--[endif]-->

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

En primer lugar, no espero hasta que el proyecto se hace para considerar la compatibilidad del navegador.

La mayoría de las veces para problemas CSS hay formas de hacer cosas que no requieren que se carguen hojas de estilo específicas del navegador, por lo que intento 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 usar divs anidados en lugar de relleno pueden ayudar a asegurarse de que todo se vea correcto sin la necesidad de hojas de estilo separadas y plantillas para diferentes navegadores.

Restablecimiento del navegador para iniciar. Nivele el campo de juego tanto como sea posible y elimine los valores predeterminados del navegador. Construye tu CSS desde cero. (Véase: http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/)

Pruebe temprano y a menudo en todos los principales navegadores durante el desarrollo.

Trate de lograr tanto como sea posible sin hacks específicos del navegador. A veces tendrás que trabajar en algún CSS específico del navegador, pero debería validarse (usa la herramienta de validación del W3C). A veces, aunque no hay nada más que un condicional (y tal vez incluso algo de JavaScript), por ejemplo, corrección para PNGS 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, pruebe http://browsershots.org . Al menos puedes obtener algunos comentarios de esta manera.

Utilice una depuración.css que resalta o describe divs y otros elementos. Lanza esto en tu HTML cabeza si es necesario durante el desarrollo. Esto puede ser de gran ayuda.

Use "barras de herramientas de desarrollador" cuando esté disponible (IE, Firefox).

ESPERAR QUE IE VA A SER UN DOLOR, y LA PRUEBA EN 6, 7 y 8.

Diviértete!

Así es como trato de reducir el dolor de tratar con IE:

1. Utilice un reset.css - Yahoo! YUI Reset o Reset CSS de Eric Meyer
2. Tenga cuidado con los flotadores, clears - por lo general causan una gran cantidad de maldiciones.
3. Tenga en cuenta los errores de hasLayout en IE, por lo general, agregar un zoom: 1 o atributos de altura ayuda a solucionar esto. Leer Al Tener La Disposición.
4. Obtener el diseño de trabajo en Firefox, Safari, Chrome, etc, manteniendo IE alrededor del 80% del camino alli.
5. Implementar un IE6.estilo CSS y un IE7.estilo css si es necesario usando comentarios condicionales.
6. Cerveza, licor u otras bebidas para adultos.

Primero, lea Al tener Layout, que explica cómo funciona internamente el motor de renderizado IE. El motor de renderizado de IE es anterior a CSS. No distingue correctamente entre elementos en línea y de bloque como cabría esperar. En cambio, en IE un elemento hasLayout. O no. Esta es la fuente del 99% de los errores CSS de IE. Por lo tanto, lea ese artículo un par de veces.

En cuanto a las correcciones, suelo usar comentarios condicionales. Varias razones:

• Son a prueba de futuro, a diferencia de CSS hackear. ¿Qué pasa si IE9 corrige el hack pero no el error que está utilizando para resolver?
• Es HTML válido (X) (los comentarios condicionales son solo comentarios simples para todos los demás)
• No requiere javascript. Te sorprendería cuántas personas tienen Javascript desactivado.

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

<!--[if IE]> <load css> <![endif]-->
<!--[if gte IE 7]> <load css> <![endif]-->

La razón es la misma que hacks: hacerlo a prueba de futuro. ¿Qué pasa si la próxima versión de IE corrige el error y usted no necesita las correcciones más? O peor aún, el" arreglo " ahora realmente ensucia su diseño en la nueva versión de IE? Por lo general, es mejor asumir que la próxima versión de IE ha corregido el error que está trabajando alrededor. He escrito un poco sobre eso cuando IE 8 estaba en el horizonte.

Creo que estaría bien escribir un archivo css específico para IE. Sé que es un dolor, pero debido a algunos problemas de possitioning, IE6 se ve diferente a todos los demás browswers.

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

<!--[if ie6]><link rel="stylesheet" type="text/css" media="screen" href="ie6_style.css" /><![endif]--> 

Con ES decir, obtener alrededor del 65% del tráfico, no creo que pueda pensar en ello como un pensamiento posterior.

En general, trato de hacer todo lo que puedo sin hacer un archivo CSS separado para IE. Usaré el formato condicional come para dirigirlo específicamente si es necesario. En general, sin embargo, a lo sumo es posible que tenga que hacer una hoja de estilo solo IE para que funcione.

Solo asegúrese de que está probando con las versiones adecuadas de IE para su audiencia, ya que IE 6, 7 y 8 son bastante sommon.

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

Puedes tener:

.someClass {
  margin-left:1px
}

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

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

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

Lo elimino

Creo que desarrollar un nuevo archivo CSS para su uso en IE sería considerablemente más fácil que reescribir su aplicación, pero no se qué escala y alcance tiene su aplicación que incluso haría que hacer eso sea una opción considerable. Supongo que puede depender de qué versiones de IE está buscando para apoyar.

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 ni de lejos tan malo como 6 era. Con mis proyectos, el la configuración predeterminada que vendo es la compatibilidad de IE7 con el código para dirigir a los usuarios de IE6 y versiones posteriores a la actualización. Si un cliente quiere que incorpore la compatibilidad con IE6 en un sitio, normalmente aumento el precio cotizado en un 50% debido a lo terrible de un dolor de cabeza es apoyar el navegador y cuánto código visual adicional tiene que ser escrito para que funcione.

Sé que esto puede caer en la categoría "demasiado poco, demasiado tarde". Dicho esto, me gustaría invertir en VMware o Parallels y crear una VM de Windows w / IE6.

A medida que se desarrolla, debe verificar gradualmente 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 variedad de servicios de validación a su disposición) luego, dependiendo del diseño, estaba sección por sección probar para obtener el diseño correcto, use comentarios para' ocultar ' las secciones en las que no está trabajando activamente.

Normalmente hago todo lo que puedo para evitar tener que crear un archivo CSS separado. Hay muchos trucos y consejos de CSS y HTML que deberían permitirle hacer que funcione en IE6 y arriba, así como en cualquier otro navegador común. Lleva tiempo averiguarlo todo. Desafortunadamente, a veces con diseños complicados puede tomar mucho tiempo, especialmente cuando no lo pruebas sobre la marcha.

Dejo que otros resuelvan los problemas por mí. Yo uso 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 los tamaños de fuente, y lo más importante de todos ellos es su archivo de cuadrícula. Me da la capacidad de construir formato jerárquico de regiones y subregiones en la página muy rápida y fácilmente y sé que funcionará en cualquier navegador moderno importante (Yahoo prueba el heck fuera de él para asegurarse de que lo hace).

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

Tuve el mismo problema en mi dev: IE6, FFETC + LAMP + custom MVC, basado en el artículo de Rasmus Lerdorf cuando sugirió noMVC-algo así como manejarlo usando includes para encabezados, pies de página y el tipo. Codifiqué CSS, me quedé atascado con FF no renderizándolo bien. Tuve que ir a revisar mis conocimientos CSS - me di cuenta de que una sola implementación CSS puede representar correctamente en std. modo compatible (FF) e IE6. Me gustó eso. Estaba contento con el manejo de cualquier cambio utilizando un solo archivo CSS. Mi consejo:

1. Sé que usted tiene un Mac, ir venta de garaje-ing (los periódicos le dirán dónde están), obtener una vieja PC por $10 (hasta ahora he encontrado un montón). Esto le dará la oportunidad de probar IE6 temprano, mientras está en ello, obtenga un interruptor KVM también para acceder a la máquina cuando lo necesite.
2. Una de las cosas a las que me he vuelto adicto es la configuración de IE6-Deshabilitar todos los scripts ActiveX-hace que navegar por la web sin anuncios sea una explosión, de todos modos-pruebe su aplicación con & sin ActiveX configuración, y ver qué tan bien lo hace su sitio. Esto literalmente me ha ahorrado horas de momentos 'dolorosos' que la gente por encima de mí ha mencionado antes.
3. Ya sabes cómo probar FF / Opera / Safari con y sin scripting
4. Finalmente, independientemente de lo pesado que sea el uso de Javascripting en su sitio, asegúrese de que las características principales (de las que estoy seguro que tiene muchas) se carguen correctamente.

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

Cheery-O

Me aseguro de que mis sitios web funcionen de forma nativa y perfectamente en ie9 , y funcionan en ie8(posiblemente con características que faltan). Pido a todos los que utilizan una versión anterior para obtener marco de chrome. Nunca pierdo mi tiempo para ie7 y mayores, porque usar un navegador de 6 años es patético, y no se debe alentar.

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

No pondría mucho esfuerzo en hacerlo compatible con IE6, y solo aceptar el hecho de que un sitio web puede verse diferente en varios navegadores.