# 2016年4月23日

\[TOC]

## 2016年4月23日

### CSS

#### CSS hack

**CSS hack** CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，比如.kwstu{width:300px; \_ width:200px;}，一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个\_width:200px;由于下划线\_width只有IE6可以识别，所以此样式在IE6中实际设置对象的宽度为200px，后面的把前面的给覆盖了，而其他浏览器不识别\_width不会执行\_width:200px;这句样式，所以在其他浏览器中设置对象的宽度就是300px;

> margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍

**浏览器识别字符标准对应表**

![](https://4114926660-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LjTaw3l22eY6xguGexI%2F-LjTaxI_2PLJRc2sGXvR%2F-LjTb9wqX075Wgqaj4ZN%2Fie.png?generation=1562807945873334\&alt=media)

从上图可以分析出以下几种情况：

1. 大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。
2. \9    ：所有IE浏览器都支持
3. \_和-  ：仅IE6支持
4. \*     ：IE6、E7支持
5. \0    ：IE8、IE9支持，opera部分支持
6. \9\0  ：IE8部分支持、IE9支持
7. \0\9  ：IE8、IE9支持

hack汇总

```css
.element{
color:#000;             /*w3c标准*/
[;color:#f00;];         /*Webkit(chrome和safari)*/
color:#666\9;           /*IE8*/
*color:#999;            /*IE7*/
_color:#333;            /*IE6*/
}
:root .element{color:#0f0\9;}  /*IE9*/
@-moz-document url-prefix(){ .element{color:#f1f1f1;}} /*Firefox*/
```

**html头部hack**

HTML头部引用(if IE)Hack：针对所有IE：< !--\[if IE]>< !--您的代码-->< !\[endif]-->，针对IE6及以下版本：< !--\[if lt IE 7]>< !--您的代码-->< !\[endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

```markup
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
```

**选择器前缀hack**

```
*html *前缀只对IE6生效

*+html *+前缀只对IE7生效

@media screen\9{...}只对IE6/7生效

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等
```

> <http://blog.csdn.net/freshlover/article/details/12132801>