CSS hack

CSS hack 是什么

由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能在不同的浏览器中也能得到我们想要的页面效果。

CSS Hack 表现形式

CSS Hack 大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

  • 属性前缀法(即类内部Hack):
    例如 IE6能识别下划线""和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"\9",但firefox前述三个都不能认识。
.box{
    color: red;
    _color: blue;        /*ie6*/
    *color: pink;        /*ie67*/
    color: yellow\9;     /*ie/edge 6-8*/
}
  • 选择器前缀法(即选择器Hack):
    原理与属性前缀法法类似,在选择器前面加下划线或星号,区分开能否识别它们的浏览器。

  • IE条件注释法(即HTML条件注释Hack):
    条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
    (注:IE10+已经不再支持条件注释)

    Paste_Image.png

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

常见属性的兼容情况

  • inline-block: >=ie8
  • min-width/min-height: >=ie8
  • :before,:after: >=ie8
  • div:hover: >=ie7
  • inline-block: >=ie8
  • background-size: >=ie9
  • 圆角: >= ie9
  • 阴影: >= ie9
  • 动画/渐变: >= ie10
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的...
    大女表哥阅读 4,814评论 0 9
  • 原文地址:常见的CSS Hack 转载请注明出处 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本...
    xiaoxiao昱阅读 4,417评论 0 9
  • 什么是CSS hack? 由于不同厂商的流览器或某浏览器的不同版本(如IE,Firefox/Safari/Oper...
    魔_术师阅读 7,666评论 0 3
  • 1、什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safa...
    紫夏离殇阅读 1,873评论 0 1
  • 在现在的开发中,基本很少用到hack了,但是还是有必要做一定的了解,以备不时之需。 什么是CSS hack 由于不...
    lMadman阅读 3,184评论 0 2

友情链接更多精彩内容