CSS Hack整理
最近，在处理input框垂直居中的问题，为了解决浏览器的兼容性，逼不得已动用了Hack。顺便把现在主流浏览器的Hack整理一下，以备后用。
1.啥是Hack?
针对不同的浏览器写不同的css code就是Hack。
2.为什么会有Hack？
这个就不说了，前端开发心中永远的痛啊！做前端的都懂的……
3.为什么Hack会有用？
1）不同的浏览器对CSS的支持及解析结果不一样。
2）CSS code书写的顺序能影响其优先级。
4.都有哪些Hack？
1）CSS类内部Hack
如：_color:#000
*color:#f00;
2) 选择器Hack
如：*html .class{color:#222;}
#div1 > #div2{color:red;} // IE6不能识别，IE7、IE8可以识别
3)头部引用(if IE)Hack
如：<!-[if IE]-><p>你用的是IE</p><![endif]->
| IE6 | IE7 | IE8 | FF | Chrome | Safari | |
| !important | ||||||
| _ | ||||||
| * | ||||||
| \0 | ||||||
| \9 | ||||||
| -webkit-min-device-pixel-ratio |
5.最后给个例子吧！用法都在里面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS Hack</title>
<style type="text/css">
body,p{margin:0;padding:0;} /*标签样式重置*/
body{font-size:16px;font-family:微软雅黑,黑体;}
div{width:500px;line-height:40px; border:1px solid #d7d7d7;text-align:center;font-weight:blod;margin:80px auto;}
#IE{display:none;display:block\9;} /*[\9]IE可以识别*/
#uIE{display:block;display:none\9;}
.co{color:blue}
@media screen and (-webkit-min-device-pixel-ratio:0){p:nth-of-type(1){color:blue}} /*chrome与Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0){span:nth-of-type(2){display:none}} /*chrome与Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0){span:nth-of-type(3){display:none}} /*chrome与Safari*/
.fc{
color:#F60;
color:green\0; /*[\0]IE8专属Hack*/
*color:#FC3; /*[*]IE6、IE7能识别Hack*/
_color:red; /*[_]IE6专属Hack*/
}
</style>
</head>
<body>
<div id="IE">
<!--[if IE]><p class="fc">IE用户</p><![endif]-->
<!--[if IE 8]><p class="fc">嗯，使用IE8呢，还是可以的嘛！</p><![endif]-->
<!--[if IE 7]><p class="fc">还用IE7呢，看到黄色的警告了吧！</p><![endif]-->
<!--[if IE 6]><p class="fc">看到我，证明你太OUT了，还不赶紧换！</p><![endif]-->
</div>
<div id="uIE">
<p class="fc">
恭喜，您正在使用的是标准浏览器<br/>
<span class="co">您使用的是Webkit内核的引擎，Chrome或者Safari</span><br/><span class="co">【上面这句实在没办法了，请自动忽略……^_^!!!】<br/></span>
<span>如果我是橙色的，那你用的是火狐</span>
</p>
</div>
</body>
</html>
这篇东西丢在草稿箱好久了，今天发现了就改改发出来了……
