CSS Hack汇总

转载自:http://www.cnblogs.com/shoupifeng/archive/2010/01/26/1656438.html

独立

  • 屏蔽IE浏览器(也就是IE下不显示)

  • 仅Firefox可见

    *:lang(zh) select {font:12px !important;}

  • 仅Safari可见

    select:empty {font:12px !important;}

  • 仅Opera可见

    @media all and (min-width: 0px){ select{……} }

  • IE系列

  • 仅IE可见

    select {*font:12px;}
    select {+font:12px;}
    这两句作用一样,只有IE能解释 * or +

  • 仅IE7与IE5.0可以识别

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

  • 仅IE7可以识别

    *+html select {font:12px;!important;}当面临需要只针对IE7做样式的时候就可以采用这个HACK.

    IE7跟IE6及以下的一个很明显的区别就是对!important的支持.
    IE7对样式的解释跟DTD是有关,在没有DTD的时候,IE7是能读取IE6的hack的.
    同时必须说明的就是*+html这个Hack必须在松散型DTD下生效,即刻:
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>

  • IE6及IE6以下识别

    * html select {}这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK.其它浏览器不识别.

    html/**/ >body select {}这句与上一句的作用相同。

  • 仅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可以识别。

混合

  • 同一选择器针对不同浏览器

    select {
    background-color: black;/* firefox, opera, ie8 */
    [;background-color: green;]/* safari, chrome */
    *background-color: blue;/* ie7 */
    _background-color: red;/* ie6 */
    }
    html*~/**/body select {
    border: 5px solid red;/* ie8 */
    }
    以上只是一个例子说明混合写法.以下是对例子的补充
    1.IE都能识别*;标准浏览器(如FF)不能识别*;
    2.IE7,FF能识别!important,IE6不能.
    3.只有IE6能识别_
    4.不管是什么方法,书写的顺序都应该是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
    5.对于ie8 chrome hack的请 GOOGLE or BAIDU …

    相关阅读

过滤

  • IE5.x的过滤器,只有IE5.x可见

    @media tty {
    i{content:"";/*" "*/}} @import 'ie5win.css'; /*";}
    }/* */

  • IE5/MAC的过滤器,一般用不着

    /**//*/
    @import "ie5mac.css";
    /**/

  • IE的if条件Hack(写在HTML中的通过条件来链接)

    <!--[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可识别

应用

  • 盒模型解决方法

    selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}盒模型的清除方法不是通过!important来处理的。这点要明确。

  • 截字省略号

    select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。

  • 清除浮动

    select:after {content:"020"; display:block; height:0; clear:both;}
    select {zoom:1;}
    在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。

    相关阅读

  • display:inline-block

    select {
    display:inline-block;/*Firefox3 beta、IE8 beta、Opera、Safari 支持,IE 下触发 inline 元素的 hasLayout*/
    display:-moz-inline-stack;/* Firefox 的私有属性,也可以用 -moz-inline-box */

    zoom:1;/*IE 下触发 hasLayout*/
    *display:inline;/*一旦IE 下触发了 hasLayout,设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/

    text-indent:-9999px;
    *text-indent:0;
    font-size:0;
    line-height:0;/* 如需隐藏文字,可用这四个属性 */
    /*另外上面隐藏文字,还可以用更简化的方法:line-height:超级大值;font-size:0; */

    overflow:hidden;/* 针对ie,防止内容溢出,造成的高度及宽度改变 */
    vertical-align:middle;/* 行内垂直居中,针对 Opera 比较大的偏离 */

    width:px;/*?为任意非auto值*/
    height:px;/*?为任意非auto值*/
    }

    在实际应用中 -moz-inline-box 会存在元素间的对齐等问题,虽然 Firefox 还有一个私有属性 -moz-box-align 来帮助解决对齐问题,但依旧难以预料问题多多,而相对来说 -moz-inline-stack 的表现更像 inline-block ,这点可以在 Firefox3 中测试出来。但 -moz-inline-stack 使用时也会有一个 bug ,如果一个 display:-moz-inline-stack; 的元素外层元素是 display:inline; 即会使 Firefox 中其包含的链接不可点,这个需要用 position:relative; 来解决。详细例子见<<display:inline-block的应用两例>>


( ! ) Warning: Missing argument 1 for cwppos_show_review(), called in /data/www/enjoyphp/wp-content/themes/flat/content-single.php on line 29 and defined in /data/www/enjoyphp/wp-content/plugins/wp-product-review/includes/legacy.php on line 18
Call Stack
#TimeMemoryFunctionLocation
10.0000355192{main}( ).../index.php:0
20.0001355480require( '/data/www/enjoyphp/wp-blog-header.php' ).../index.php:17
30.167910171488require_once( '/data/www/enjoyphp/wp-includes/template-loader.php' ).../wp-blog-header.php:19
40.169210242632include( '/data/www/enjoyphp/wp-content/themes/flat/single.php' ).../template-loader.php:74
50.256610810216get_template_part( ).../single.php:5
60.256610810736locate_template( ).../general-template.php:167
70.256710810832load_template( ).../template.php:643
80.256710811216require( '/data/www/enjoyphp/wp-content/themes/flat/content-single.php' ).../template.php:686
90.267310795952cwppos_show_review( ).../content-single.php:29

发表评论

电子邮件地址不会被公开。 必填项已用*标注