常用css hack使用方法

猫性男孩

代码如下：

@import url(”website.css”)
注意这句,只对ie5版本以上和现代浏览器才有效,ie4,不会认识的..
—————————————————-
@import url(”oncss.css”) screen;
ie系列全不识别. ..因为ie对指定设备类型的选项都不支持..firefox 可以识别;
—————————————————
注释hack
<style type=”text/css”>
*{ margin:0px; padding:0px;}
#content { background-color:red;}
#content /**/{ background-color:green;}
</style>
ie6,ie7,firefox都读成green;
ie5以下,读成red;

IE7和IE6可以识别
style{
*height:50px;//“*”仅IE**IE7可以识别。
}
*当针对IE**IE7时可以用这样的方法。

仅IE6可以识别
style{
_height:50px;//“_”仅IE6可以识别。
}

IE6及IE6以下识别
* html select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body select {…}
这句与上一句的作用相同。

仅IE7可以识别
*+html select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。

仅IE7与IE5.0可以识别
*+html select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。

仅IE6不识别，屏蔽IE6

select {  display /*屏蔽IE6*/: none;}
这里主要是通过CSS注释分开一个属性与值， 注释在冒号前。

仅IE6与IE5不识别，屏蔽IE6与IE5

select/**/ {  display /*IE6,IE5不识别*/ :none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。 不屏蔽IE5.5

仅IE5不识别，屏蔽IE5

select/*IE5不识别*/ { …}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。

多出来的字节以省略号显示
text-overflow:ellipsis;overflow:hidden;white-space: nowrap;
顺序必须这样,换了顺序可能就没这个效果了!

针对Opera的样式–只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

css的过滤器
为了让一些特别的样式不 影响到其他正常的浏览器，特把特别的样式分离出来，通过过滤的方法加载到浏览器里，这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器，只有IE5.x可见
@media tty {
i{content:”\”;/*” “*/}} @import ‘ie5win.css‘; /*”;}
}/* */

IE5/MAC的过滤器，一般用不着
/*\*//*/
@import “ie5mac.css“;
/**/

IE的if条件Hack
<!–[if IE]> Only IE <![endif]–>
所有的IE可识别
<!–[if IE 5.0]> Only IE 5.0 <![endif]–>
只有IE5.0可以识别
<!–[if gt IE 5.0]> Only IE 5.0+ <![endif]–>
IE5.0包换IE5.5都可以识别
<!–[if lt IE 6]> Only IE 6- <![endif]–>
仅IE6可识别
<!–[if gte IE 6]> Only IE 6/+ <![endif]–>
IE6以及IE6以下的IE5.x都可识别
<!–[if lte IE 7]> Only IE 7/- <![endif]–>
仅IE7可识别