使用@media实现IE hack的方法,css 兼容ie,解决火狐、谷歌兼容问题

在写项目当中,我们总会遇到兼容各种浏览器,当然包括ie各种版本,在解决ie   css兼容性问题中,比如说使用“\0”,“\”和“\9”来仅让IE某些版本识别,但浏览器有时会无视这些代码。那我们可以尝试使用@media实现IE hack的方法.

列如:

   仅IE6和IE7识别

  @media screen\9 {

              .el-form-item__label {

                  position: relative;

      }

        }

 仅IE8识别

  @media \0screen { 

              .el-form-item__label {

                  position: relative;

      }

       }

  仅IE6和IE7、IE8识别

  @media \0screen\,screen\9 {   

             .el-form-item__label {

                  position: relative;

      }

      }

 仅IE9和IE10识别

  @media screen and (min-width:0\0) { 

             .el-form-item__label {

                  position: relative;

      }

      } 

  仅IE10识别

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

              .el-form-item__label {

                  position: relative;

      }

       }

仅IE8-10识别

  @media screen\0 { 

              .el-form-item__label {

                  position: relative;

      }

        } 

 仅支持谷歌

       @media screen and (-webkit-min-device-pixel-ratio:0) {

               .el-form-item__label {

                  position: relative;

      }

       }

仅支持火狐

       @-moz-document url-prefix() {

             .el-form-item__label {

                  position: relative;

      }

         }

猜你喜欢

转载自www.cnblogs.com/429zk/p/11578420.html