CSS Hack技术

Hacker:黑客
CSS Hack:据此而来,通过浏览器解析漏洞从而衍生的兼容性调节技术

hacker.jpg

Hack概念

不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack。

CSS属性Hack

IE6能识别下划线_和星号*,IE7能识别星号*,但不能识别下划线_,而firefox两个都不能认识

CSS选择符Hack

IE6 能识别*html .className{},IE7能识别*+html .className{}或者*:first-child+html .className{}

IE条件注释Hack

IE条件注释是微软从 IE5 开始就提供的一种非标准逻辑语句。比如针对所有IE:<!–[if IE]><!–您的代码–><![endif]–>,针对 IE6 及以下版本:<!–[if lt IE 7]><!–您的代码–><![endif]–>,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都 会生效。

条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。


常用的CSS Hack

CSS属性Hack

  • color:red; IE*
  • _color:red; IE6
  • *color:red; IE6 + IE7
  • +color:red; IE6 + IE7
  • *+color:red; IE6 + IE7
  • color:red\9; IE6 + IE7 + IE8 + IE9
  • color:red\0; IE8 + IE9
  • color:red\9\0; IE9
  • color:red!important; !IE6

CSS选择符Hack

  • *html #demo { color:red;} IE6
  • *+html #demo { color:red;} IE7
  • body:nth-of-type(1) #demo { color:red;} IE9+、FF3.5+、Chrome、Safari、Opera
  • head:first-child+body #demo { color:red; } IE7+、FF、Chrome、Safari、Opera
  • :root #demo { color:red\9; } IE9

IE条件注释Hack

  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``

以上为常用的CSS Hack用法,详情请移步至 CSS Hack技术介绍及常用的Hack技巧集锦

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的...
    大女表哥阅读 1,131评论 0 9
  • 什么是 CSS hack 由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozill...
    阿鲁提尔阅读 271评论 0 2
  • 1.如何调试 IE 浏览器 IE8以上有开发者工具(高版本的IE开发者工具兼容模式可以往下选择兼容不同版本),F1...
    饥人谷_kule阅读 426评论 0 0
  • 一、如何调试 IE 浏览器? 在IE7以上的版本中可以通过按快捷键F12调出开发人员调试框,如下图IE7以上调试工...
    dengpan阅读 564评论 0 2
  • 一、问答部分 1. 如何调试 IE 浏览器 IE7及以上版本有调试台,可以按F12启动。Paste_Image.p...
    _hello__world_阅读 484评论 0 1