【CSS兼容】CSS在不同浏览器下的Hack(IE6 / IE7 /IE8 /Firefox)

时间：2017-06-13

在写CSS样式编码时，难免会遇到对特定的浏览器进行样式设定。

在讲述CSS的Hack前，先来了解下什么是CSS Hack?

什么是CSS Hack呢？(资料来源互联网)

CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

OK，言归正传，下面先上代码展示下不同浏览器下的CSS Hack是如何编写的：

selector{ 
	property:value; /* 正常写法普遍支持 */
	property:value9; /* 所有IE浏览器(ie6+)支持 */
	/*但是IE8不能识别“ * ”和“ _ ” */
        [color:#000;color:#0F0; /* SF,CH支持 */
        color:#00F\0; /* IE8*/
	+property:value; /* IE7 */
	_property:value; /* IE6 */ 
}

CSS内部属性级Hack

语法：

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

取值：

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

以下是实战代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【CSS兼容】CSS在不同浏览器下的Hack(IE6 / IE7 /IE8 /Firefox)-逐风的技术之路</title>
</head>
<style type="text/css" media="screen">
p.ie{
    height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;
    color:blue;/* 非IE9下为蓝色 */
    color:brown9;/* IE9下为棕色 */
    +color:red;/* IE7下为红色 */
    _color:green;/* IE6下为绿色 */
}
</style>
<body style="width:500px;margin:0 auto;">
<p class="ie">
<span style="display:block;/* 非IE9下为块元素 */display:none9;/* IE9下隐藏 */">嘿嘿，小子竟然也用Firefox，蓝色文字。</span>
<!--[if IE 8]>不错不错，挺先进的嘛，使用IE8呢！文字是褐色的。<![endif]-->
<!--[if IE 7]>你，IE7，红色文字！<![endif]-->
<!--[if IE 6]>孩子，虽然显示的是绿色文字，不过，IE6可不是好东西呢！<![endif]-->
</p>
</body>
</html>

上一条：【CSS入门】CSS的基础语法 下一条:【CSS】实现强制不换行/自动换行/强制换行CSS样式

【CSS兼容】CSS在不同浏览器下的Hack(IE6 / IE7 /IE8 /Firefox)

相关文章

最新文章