En el desarrollo para escritorio actual, solo se debe considerar la compatibilidad con IE9/10/11. Las versiones anteriores de IE prácticamente ya no se utilizan, y los clientes suelen requerir soporte solo para estas tres versiones.

Windows 7 incluye por defecto Internet Explorer 8, por lo que podría encontrarse con clientes que requieran compatibilidad con esta versión, aunque esto es fácil de manejar. En caso extremo, se puede implementar una versión simplificada de la página, lo cual es preferible a intentar hacer compatible con versiones anteriores a IE8.

Para pruebas de compatibilidad entre navegadores, se puede utilizar use i can: https://caniuse.com/

I. Problemas de compatibilidad en CSS. [Compatibilidad con etiquetas, no necesario considerar]

IE9/10/11 tienen soporte parcial para propiedades CSS. IE11 tiene ya gran parte del soporte, pero aún hay algunas propiedades comunes sin soporte.

• Propiedades CSS con compatibilidad problemática: https://blog.csdn.net/weixin_44860135/article/details/89473087

1. Degradados: IE9/10/11 parecen no soportarlos, pendiente de verificación.
2. Eliminación de estilo predeterminado de select:
3. Layout flexbox: El uso de flexbox en IE10 e IE11 tiene limitaciones, cuando las etiquetas son inline, justify-content no funciona correctamente.
4. Tamaños de etiqueta video: IE9 soporta video pero no perfectamente, con problemas de tamaño de pantalla.

• Soluciones para compatibilidad CSS:

1. Método de comentarios condicionales IE: Los comentarios condicionales ya no son compatibles desde IE10+.

a. Comentarios reconocidos por IE:

    <!--[if IE]> 
          Todos los IE pueden leerlo 
    <![endif]-->     

b. Comentarios reconocidos por navegadores no IE:

    <!--[if !IE]><!-->
              Reconocido por todos excepto IE 
    <!--<![endif]-->    

2. Método de prefijos CSS:

a.

3. Método de sufijos de valores CSS:

\0: IE8/9/10 [IE11 no funciona]

\9:

4. Método de prefijos de selectores:

-ms-: [IE10 parece no funcionar, pendiente de verificación]

5. Método de consultas multimedia: [Probado y funcional en IE10/11] Referencia: https://blog.csdn.net/jsyxiaoba/article/details/100765815

　　@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  　　.aaa{padding: 0 6px;}
　　}

Para pequeños cambios en CSS, este método es recomendable. Los problemas de compatibilidad actuales principalmente afectan a IE11/10/9, otras versiones no requieren atención. Si no funciona en IE9, se puede agregar \0 o \9 como solución.

II. Problemas de compatibilidad en ES5. [Los navegadores IE no soportan sintaxis ES6+]

IE9/IE10/IE11 no soportan sintaxis ES6+. En entornos sin herramientas de compilación (webpack o gulp), se deben usar sintaxis anteriores a ES5. [Solo si los compiladores no pueden hacer la conversión]

El desarrollo de páginas web para PC debe considerar compatibilidad con IE, al menos IE10/11, de lo contrario se terminará enfrentando problemas (mucha historia de frustración).

• APIs ES5 con compatibilidad problemática:

1. FormData: No usar en IE9, pendiente de verificación en IE10/IE11.

• Soluciones para compatibilidad ES5: [Principalmente evitar APIs no compatibles, implementar funcionalidades usando sintaxis soportada]

1. Carga de archivos en navegadores IE: https://www.cnblogs.com/ylxmt/p/10132621.html

Los navegadores IE9 e inferiores no soportan el objeto FormData en JavaScript. Por tanto, la carga de archivos debe realizarse mediante controles de formulario.

La carga de archivos mediante formularios tiene defectos:

1. El envío de formularios no permite parámetros headers, imposible agregar campos token en headers.
2. La mayoría de servidores procesna formularios con redirección, no permitiendo recibir respuestas como en AJAX.

a. Si el servidor devuelve JSON, IE no puede procesarlo, mostrando diálogo de abrir o guardar archivo.

Esto ocurre porque IE no puede interpretar datos JSON en callbacks, tratándolos como archivos.

b. IE9 puede interpretar tipos text/html o text/plain, por lo que el backend debe devolver estos tipos personalizados.

III. Solución mediante plugins de terceros para compatibilidad

• html5shiv: Soporte de etiuqetas HTML5 en IE. [Pendiente de verificación] https://jingyan.baidu.com/article/db55b609a96a114ba30a2f2c.html
• Plugin de selectores CSS3 (varios archivos): Punto de entrada http://selectivizr.com/
• e-css3.htc: Resuelve compatibilidad de bordes redondeados en IE6/7/8. [Pendiente de verificación]
• browser.min.js: Permite soporte de algunos sintaxis ES6 en IE. Babel convierte solo nuevas sintaxis JavaScript, no nuevos APIs como Set, Maps, Proxy, Reflect, Symbol, Promise, Iterator, Generator, etc.
• browser-polyfill: Resuelve funcionalidades no cubiertas por browser.js. https://blog.csdn.net/weixin_42273718/article/details/100897195

IV. Soporte de bibliotecas de terceros para IE

• jQuery versión 2.0 y superiores no soportan IE6/7/8;

V. Resumen del proceso de desarrollo para compatibilidad en páginas de escritorio

1. Primero desarrollar la página en navegadores modernos (como Chrome).
2. Crear un archivo CSS separado para resolver problemas de compatibilidad en IE9 e inferiores, importándolo mediante comentarios condicinoales IE. [Este método no resuelve problemas de IE11]

    <!--[if lt IE 9]>
        <link rel="stylesheet" href="./css/lte-ie9.css">
    <![endif]-->

3. Usar consultas multimedia para resolver compatibilidad en IE10/IE11, que tienen buena compatibilidad con CSS3.
4. Crear un archivo JS separado para resolver problemas de compatibilidad en IE10 e inferiores, declarando manualmente APIs ES5 no soportadas para que el programa pueda invocarlas.
5. Si existen soluciones listas de terceros para compatibilidad CSS o JS, simplemente importarlos. Debe asegurarse de usar comentarios condicionales IE u otros métodos específicos para IE.