[CSS] CSS hack

CSS hack

CSS hack

不同浏览器对于css的解析结果是不同的，这是就需要使用不同的css代码来解决兼容性问题，针对不同的浏览器写不同的css代码的代码，就叫做CSS hack

通过有条件注释实现hack

条件注释主要针对的是IE浏览器，所以我们也把他称作IE条件注释。另外IE条件注释只有IE5以上的版本才开始支持IE条件注释，所以“只有ＩＥ”才能识别，换句话说，只有IE5版本以上才能识别IE条件注释。如此一来，我们管理给IE兼容写的单独样式，就带来了极大的方便与好处。最后有一点需要提出的是：“IE的条件注释不单单针对样式，我们也可以针对于javascrit或者其字的注释说明”著作权归作者所有。

下面我们一起来看针对不同版本如何使用条件样式：

• 所有IE浏览器：

  <!--[if IE]>
  	<link rel="stylesheet" href="all-ie" type="text/css">
  <![endif]-->
  

• IE以外的浏览器

  <!--[if !IE]>
  	<link rel="stylesheet" href="all-ie" type="text/css">
  <![endif]-->
  

  或者

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

• 仅支持IE6 /7/ 8/ 9/ 10

  <!--[if IE 6]>
  	<link rel="stylesheet" href="all-ie" type="text/css">
  <![endif]-->
  

• 低于/高于IE 6/7/8版本

  <!--[if gt IE ]>
  	<link rel="stylesheet" href="all-ie" type="text/css">
  <![endif]-->
  

  gt: 高于
  gte: 高于或者等于
  lt: 低于
  lte: 低于或者等于
• 指定多种版本

  <!--[if (IE 6)|(IE 7)|(IE 8)]>
  	<link rel="stylesheet" type="text/css" href="ie6-7-8.css">
  <![endif]-->
  

CSS Hack

1. 属性值hack

• IE6

  .class {
  	_color: blue;
  	-color: blue;
  }
  

• IE6/7

  .class {
  	!color: blue;
  	$color: blue;
  	&color: blue;
  	*color: blue;
  }
  

• IE8/9

  .class {
  	color: blue\0/;
  }
  

• IE10

  .class {
  	color: blue\9;
  }
  

2. 选择器的hack

• IE6
  *（空格）html
• IE6/7
  选择器后面加逗号
• IE6以外

  /*IE6*/
  * html .class{
  	color:blue;
  }
  /* IE6/7*/
  class,{
  	color:blue;
  }
  /*除了IE6*/
  html > body{
  	color:blue;
  }
  

参考

1. 浏览器兼容之旅的第一站:如何创建条件样式
2. html和css的hack的学习