Problemas comunes de compatibilidad del navegador IE de front-end

Problemas de compatibilidad comunes del navegador IE

• Problemas de compatibilidad

  • Problema de borde de imagen en ie

    • La imagen se coloca en la etiqueta a

    • img {
          border:none
      }

  • El problema de escribir atributos compuestos de fondo en navegadores inferiores a ie8

    • .bg {
          background:url("./images/bg.jpg")no-repeat center
      }

    • //解决方案：在url和no-repeat 直接加上空格
      .bg {
          background:url("./images/bg.jpg") no-repeat center
      }

  • Otros problemas de compatibilidad de la versión baja de IE

    • Definir contenedores de pequeña altura en IE6 y navegadores anteriores

      • #test {
            overflow:hidden;
            height:1px;
            font-size:0;
            line-height:0;
        }

    • IE6 y los navegadores anteriores producen un error de doble margen al flotar

      • Solución: establezca el atributo de visualización de la etiqueta en línea para ie6

      • #test {
            float:left;
            _display:inline;
        }

    • El problema de la invalidación automática | oculta del atributo de desbordamiento de la etiqueta principal cuando las etiquetas secundarias se colocan entre sí en IE7 y navegadores anteriores

      • Solución: establezca la posición de posicionamiento relativa: relativa a la etiqueta principal.

    • El bloque ie7 no se muestra en una línea en la transición de bloque

      • solución:

      • div {
            display:inline-block;
            *display:inline;
            *zoom:1;
        }

    • Los navegadores IE7 y anteriores eliminan el problema de flotación

      • /* : 单冒号兼容性更好，不推荐用双冒号 :: */
              .clearfix:after {
                  content: '';
                  display: block;
                  clear: both;
              }
        ​
              /* 兼容 ie7 及以下浏览器 清浮动问题 */
              .clearfix {
                  *zoom: 1;
              }

      •  

 

Hack de CSS

• Hack de condición

  • Mayor que: gt

  • Mayor o igual a: gte

  • Menos de: lt

  • Menor o igual a: lte

  • <!--[if IE]>
           <p>只在IE中能看到这个段落</p> 
       <![endif]-->
       //只有IE6以上，才能看到应用了test类的标签是红色文本
     <!--[if gt IE 6]>
           <style>
             .test {
                   color:red;
             }
           </style>
     <![endif]-->

  • Los comentarios de condición se han eliminado de IE10 y superior, preste atención al usar

  • Hack a nivel de propiedad

    • _ Guión bajo: seleccione IE6 y más abajo

    • *: Elija IE7 y más abajo

    • \ 0: Elija arriba ie8

  • color:red;//所有浏览器可识别
    _color:red;//仅IE6识别
    *color:red;//IE6、IE7识别
    color:red\0;//IE8、IE9识别

  • Hack de nivel de selector

    • * html .box {
          background:red;
      }//只有在IE6显示红色

    • * + html .box {
          background:red;
      }//只有在IE7显示红色

•