# 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倍

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

![](/files/-LjTb9wqX075Wgqaj4ZN)

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

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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://note.niefee.com/summary/4/2016-nian-4-yue-23-ri.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.