日期:2014-05-17  浏览次数:20694 次

css hack积累

?

?

<html xmlns:wfs="http://www.opengis.net/wfs" xmlns="http://www.w3.org/TR/xhtml1/strict">
<head>
	<style>
	html{background:#cccccc;margin:0px;padding:0px;}

	#tip {
		background-color:blue; /*非IE 背景藍色*/
		background-color:red\9; /*IE6、IE7、IE8背景紅色*/
		background-color:green\0; /* ie 8*/
		background-color:yellow\9\0; /* only ie 9*/
		width:600px;
		height:400px;
		color:gray;
		font-weight:bold;
		overflow:auto;
		_color:white; /* oley IE6*/
		*color:black; /*only IE7*/	
		color:blue\0/; /* IE8,IE9*/	
		color:red\9\0; /* only IE9*/	
		/*最大高度和最小高度*/
		min-height:200px;
		max-height:400px;
		height:expression(this.height > 400 ? "400px" : this.height < 200 ? "200px":"auto");

	}
	</style>
</head>
<body>
	
	<!--[if IE]>IE<![endif]-->
	<script>
		function test(){
			document.getElementById("tip").innerHTML = document.getElementById("tip").innerHTML+"<br/>换行";
		}
	</script>
	<input type="button" value="test" onclick="test()">
<div id="tip">
	【总结】:<br/>

	类pack:<br/>
	* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
  *+html #demo {width:130px;} /*会被IE7执行*/
  所以最后,#demo的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px;<br/>
	IE6 hack:_background-color:#CDCDCD; /* ie 6*/<br/>
	IE7 hack:*background-color:#dddd00; /* ie 7*/<br/>
	IE8 hack:background-color:red \0; /* ie 8/9*/<br/>
	IE9 hack:background-color:blue \9\0;/*ie9*/<br/>
	</div>
</body>
</html>
?

?

?

?

.test{
color:#000000;                  /* 区别出FF,OP,所有浏览器能识别*/
[;color:#00FF00;      /* 区别出SF,CH,只有它们能识别*/
color:#0000FF\9;       /* 区别出IE8,只有IE6/7/8能识别*/
*color:#FFFF00;                 /* 区别出IE7,只有IE6/7能识别 */
_color:#FF0000;              /* 区别出IE6 ,只有IE6能识别*/
}
?

?

引用地址:http://www.58mb.com/info/design/css/053521621081.html

(额外参考:http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.html)

?

[;??webkit内核及IE6/7都可识别

?

/*
css hack 小结:

 [-moz]:用于Firefox
 [-webkit]:Safari和Chrome。
「\9」:all IE<br/>
「_」:only IE6<br/>
「*」:IE6 and IE7<br/>
「\0」:only IE8<br/>
「!important」:IE7识别,IE6不识别<br


*/
?

?

愤怒的jser - css不简