【转】【整理】css hack

css hack

参考：

感觉比较靠谱=》http://www.cnblogs.com/PeunZhang/archive/2012/04/09/2437563.html

http://www.css88.com/book/css/hack/conditions.htm

http://www.cnblogs.com/zzd0916/p/6097289.html

css hack分为三种：条件hack、属性级hack、选择符级hack

条件hack

语法

<!-- [if <keywords>? IE <version>?] -->
html代码块
<![endif]-->

取值

<keywords>

if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

是否: 指定是否 IE 或 IE 某个版本。 关键字：空

大于: 选择大于指定版本的 IE 版本。 关键字：gt (greater than)

大于或等于： 选择大于或等于指定版本的 IE 版本。 关键字：gt e(greater than or equal)

小于： 选择小于指定版本的 IE 版本。 关键字：gt (greater than)

小于或等于： 选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）

非指定版本： 选择除指定版本外的所有IE版本。关键字：!

<version>

目前的常用IE版本为6.0及以上

IE10及以上版本已将条件注释特性移除，使用时需注意。

说明

用于选择IE浏览器及IE的不同版本
if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何HTML代码块）

属性级hack

语法

selector { <hack>? property:value <hack>?;}

取值

_：选择 IE6 及以下。 【连接线/中划线（-）也可使用，为了避免与某些带有中划线的属性混淆，所以使用下划线（_）更合适。

*：选择 IE7 及以下。 【诸如：（+）与（#）之类的也可使用，不过业界对（*）认知度更高。

9：选择 IE6、7、8

：选择 IE8、9、10

9：选择 IE9、10

“!important”的写法只有IE6不能识别

.Selector{margin-left:-2px}【ie8和ie9均可识别】
:root .Selector{margin-left:09}【只有ie9可识别:root】

说明

一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。

如想同一段文字在IE6,7,8显示为不同颜色，可这样写：
.test {
	color: #0909; /* For IE8+ */
	*color: #f00;  /* For IE7 and earlier */
	_color: #ff0;  /* For IE6 and earlier */
}

// * 上述Hack均需运行在标准模式下，若在怪异模式下运行，这些Hack将会被不同版本的IE相互识别，导致失效。

选择器级hcak

语法

<hack> selector{ sRules }

html* 选择器{}: 只支持IE7

*+html 选择器{}: 仅支持IE7。使用该选择器需要HTML顶部有声明：

*html 选择器{}: 只支持IE6

例子

* html .test { color: #090; }       /* For IE6 and earlier */
* + html .test { color: #ff0; }     /* For IE7 */
.test:lang(zh-cmn-Hans) { color: #f00; }  /* For IE8+ and not IE */
.test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */

白树（第一个参考中）还有媒体查询hack（@media）。后面碰到了再整理。。