CSS常用hack技巧

2012年10月16日发布阅读(2201) 作者：Jerman

在当前的WEB前端页面制作中，鉴于市面上浏览器种类繁多(IE6-IE9、firefox、Chrome、Safari、Opera等等)，各种浏览器对CSS的解析效果会有所不同（少数），所以要想让页面完全的兼容所有浏览器，就必须要用css hack。可能不同的开发人员，使用的hack方式不一样，但最终的目的都是希望各种浏览器渲染出同样的页面效果。

下面对常用的CSS HACK方法做了下收集总结，希望对大家有所帮助，当然也欢迎指正或补充：

1、针对IE的if条件注释hack

了解下if IE的一些语法词:

lte：Less than or equal to的简写，小于或等于;
lt ：Less than的简写，小于;
gte：Greater than or equal to的简写，大于或等于;
gt ：Greater than的简写，大于;
! ：不等于的意思。

利用if IE可以判断css、js或其他任何标签，本站就使用了if IE hack来兼容IE浏览器的，如:

<!--[if lt IE 9]><script src="http://www.cnf2e.com/wp-content/themes/jerman-cnf2e/js/html5.js" type="text/javascript"></script><![endif]-->
<!--[if IE 6]>
<script src="http://www.cnf2e.com/wp-content/themes/jerman-cnf2e/js/DD_belatedPNG_0.0.8a.js"></script>
<script>DD_belatedPNG.fix(".j_container,.j_aside,.j_pages,.post,.single_comments");</script>
<![endif]-->

2、!important

IE6是支持!important的，但是有个小bug，就是当使用!important后，如果后面的样式属性名有重复则会忽略!important，IE7修复了这个问题!
如:

.text{ color:red!important; color:green; }/*IE6下是绿色，IE7、FF、OP等显示红色文字*/

3、选择器hack(selector hacks)和CSS属性hack(css attribute hacks)

转载了一老外的代码，总结的比较全面,原文中有些不正确的地方已经删除或更正，如还有错误，欢迎指正。（原文：http://paulirish.com/2009/browser-specific-css-hacks/）代码如下：

选择器hacks

html,
body {
    color: #333;
    background: #fff;
    font-family: 'Microsoft YaHei,微软雅黑,MicrosoftJhengHei,华文细黑,STHeiti,MingLiu';
    font-size: 14px;
    min-width: 800px;
    height: 100%;
}
a {
    color: #333;
}
hr {
    display: block;
    height: 1px;
    background: #ddd;
    border: none;
    margin: 15px 0;
    overflow: hidden;
}
.g-main {
    width: 640px;
    margin: 0 auto;
    padding: 100px 50px 50px;
}
/* IE6 及以下*/
* html #uno  { color: red }
/* IE7 */
*:first-child+html #dos { color: red } 
*+html #dieciocho {  color: red }
/* IE7以上, Firefox, Chrome, Safar, Opera(除IE6外) */
html>body #tres { color: red }
/* IE8以上, Firefox, Chrome, Safar, Opera (除了IE6,IE7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27及以下, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* IE9, safari 3+, chrome 1+, opera9+, firefox 3.5+ */
body:first-of-type #ocho {  color: red }
/* safari3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
/* 所有浏览器 除了IE6-8 */
:root *> #quince { color: red  }
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }

CSS属性hacks

/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* IE6, IE7, IE8, (IE9有部分不支持)*/
#diecinueve { color: blue\9; }
/* IE7, IE8, IE9 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* "!"号后面可以是任何字符 */
/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* 必须放在每条CSS语句的结尾 */

上面CSS HACK都经过了浏览器测试，可放心使用。

针对IE8，没有单独的应用它的CSS HACK，我们可以在中加上如下

标签，把IE8变成IE7使用就好了

<meta http-equiv="x-ua-compatible" content="ie=7" />

Css