cssHack-属性Hack

2012年11月21日 0条评论 281 views 标签:, ,

语法:

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

_:选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适。
*:选择IE7及以下。诸如:(+)与(https://csswang.com/)之类的均可使用,不过业界对(*)的认知度更高
9:选择IE6+
�:选择IE8+和Opera
[;property:value;];:选择webkit核心浏览器(Chrome,Safari)。IE7及以下也能识别。中括号内外的3个分号必须保留,第一个分号前可以是任意规则或任意多个规则[;color:https://csswang.com/f00;]; 与 [color:https://csswang.com/f00;color:https://csswang.com/f00;]; 与 [margin:0;padding:0;color:https://csswang.com/f00;]; 是等价的。生效的始终是中括号内的最后一条规则,所以通常选用第一种写法最为简洁。

选择不同的浏览器及版本

  • 尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎
  • 通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为标准模式。
  • 一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如下面这个例子:

如想同一段文字在IE6,7,8显示为不同颜色,可这样写:

.test{
	color:https://csswang.com/0909; /* For IE8+ */
	*color:https://csswang.com/f00;  /* For IE7 and earlier */
	_color:https://csswang.com/ff0;  /* For IE6 and earlier */
}

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

示例代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>cssHack-属性Hack</title>
<style>
h1{margin:10px 0;font-size:16px;}
.test{
	color:https://csswang.com/c30;          /* For Firefox */
	[;color:https://csswang.com/ddd;];      /* For webkit(Chrome and Safari) */
	color:https://csswang.com/090�;        /* For Opera */
	color:https://csswang.com/00f9;        /* For IE8+ */
	*color:https://csswang.com/f00;         /* For IE7 */
	_color:https://csswang.com/ff0;         /* For IE6 */
}
</style>
</head>
<body>
<div class="test">在不同浏览器下看看我的颜色吧</div>
</body>
</html>

友情提示:尽量找到通用方法而减少对CSS Hack的使用,大规模使用CSS Hack会带来维护成本的提高以及浏览器版本变化而带来类似Hack失效等系列问题

m88帮助网站:



无觅m88帮助网站插件,快速提升流量

你也可以分享到:

继续查看有关: , , 的文章

上一篇:

下一篇: