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

Posted 2022-11-29 429zk

在写项目当中，我们总会遇到兼容各种浏览器，当然包括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;