惯用CSS Hack
日期：2014-05-17 浏览次数：20763 次
常用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;//“*”仅IE6和IE7可以识别。
}
*当针对IE6和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可识别
代码如下：
@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;//“*”仅IE6和IE7可以识别。
}
*当针对IE6和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可识别
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
