【转】【整理】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)。后面碰到了再整理。。

原文地址:https://www.cnblogs.com/xfh0192/p/7668204.html