`
accpxudajian
  • 浏览: 451998 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css hack积累

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


*/

 网上摘文：

 

/*

 上面这段代码大家可以直接copy出来，保存成html在各浏览器试试。下面我来分析下：
    background-color:blue; 各个浏览器都认识，这里给firefox用；
    background-color:red\9;\9所有的ie浏览器可识别；
    background-color:yellow\0; \0 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；
    +background-color:pink; + ie7定了；
    _background-color:orange; _专门留给神奇的ie6；
    :root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，呃。。。这个。。。，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
    @media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

    好了就这么多了，特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。

    如果给位看官有更好的css hack写法或者本文有不妥之处，欢迎留言，第一次写文章，请轻砸。
*/
 

 

愤怒的jser - css不简

分享到：
| 常用脚本
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics