栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

这可能是世上最全的CSS hack了,附带例子哦!

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

这可能是世上最全的CSS hack了,附带例子哦!

在前端开发中最烦人的问题莫过于浏览器兼容性问题了,下面是我工作依赖积累的CSS hack笔记,都是再线上使用过的哦,都是经过考验的!


Webkit内核CSS hack(Chrome、Safari、Opera)。
注:很奇怪,在Windows10中的Edge(版本是13)下,竟然也起作用,莫非微软要向Webkit看齐?

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

     } 
  }

Firefox CSS hack
   @-moz-document url-prefix(){
    .demo { 

    } 

}


  IE8/9/10/11 CSS hack

   @media screen {
      .demo{
   
      }
   }

  IE6/7/8 CSS hack

@media screen,screen9 {
    .demo{
 
    }
  }

IE9/10 CSS hack

注:IE9/10能识别CSS属性值后面的9,所以想要在IE9/10下表现出来的样式,可以在后面加9即可
此hack有一个问题,即设置的所有属性在IE7下都不起作用,可以使用 IE6/7 的hack来修复一下

display: none9;


IE6/7 CSS hack

注:IE6/7能识别CSS属性前面的 ,所以想要在IE6/7下表现出来的样式,可以在前面面加 即可

*display:none;


IE8 CSS hack

 @media screen,screen9 {
    .demo{
  
    }
   }

IE7 CSS hack

注:IE7的单独的CSS hack 必须结合着IE6的hack使用

*color:red;
_color:green; 

IE6 CSS hack

_color:green;

结束语:在工作中有时候我需要单独使用IE9 hack,但是我并没有发现有IE9的hack,如果有那位同学知道的话麻烦告知我

我写了一个例子,大家可以拷贝到自己本地,使用各种浏览器测试一下:





测试CSS HACK

    
    .webkit-hack{
 color:green;
    }
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
     .webkit-hack { 
color:red;
     } 
  }
  
  .firefox-hack{
    color:green;
  }
  @-moz-document url-prefix(){
    .firefox-hack{
 color:red;
    }
  }
  
  .IE-hack{
    color:green;
  }
  @media screen {
     .IE-hack{
 color:red;
      }
  }
  
  .IE678-hack{
      color:green;  
   }
   @media screen,screen9 {
    .IE678-hack{
 color:red;
    }
   }
  
  .IE910-hack{
    color:green;
    color:red9;
    *color:green; 
  }
  
  .IE67-hack{
    color:green;
    *color:red;
  }
  
  .IE8-hack{
      color:green;  
   }
   @media screen,screen9 {
    .IE8-hack{
 color:red;
 *color:green;
    }
   }

  
  .IE7-hack{
    color:green;
    *color:red;
    _color:green;
  }
  
  .IE6-hack{
    color:green;
    _color:red;
  }



我在webkit内核浏览器下显示为红色,在其他非webkit内核浏览器下显示为绿色

我在firefox浏览器下显示为红色,在其他浏览器下显示为绿色

我在IE8/9/10/11浏览器下显示为红色,在其他浏览器下显示为绿色

我在IE6/7/8浏览器下显示为红色,在其他浏览器下显示为绿色

我在IE9/10浏览器下显示为红色,在其他浏览器下显示为绿色

我在IE6/7浏览器下显示为红色,在其他浏览器下显示为绿色

我在IE8浏览器下显示为红色,在其他浏览器下显示为绿色

我在IE7浏览器下显示为红色,在其他浏览器下显示为绿色

我在IE6浏览器下显示为红色,在其他浏览器下显示为绿色

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/243307.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号