css 常用效果集锦

1、只支持IE的table隔行换色：

    tbody tr {background-color:expression('#ffffff,#f1f9fc'.split(',')[rowIndex%2]);}

 

2、连续字符换行：

    word-wrap:break-word;

 

 

3、两端对齐；文字对齐：

    text-align:justify; text-justify:inter-ideograph;

 

4、兼容浏览器,IE6.0/IE7.0/火狐ff/

   书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面

   第一种方法： background:orange;*background:green !important;*background:blue;

   第二种方法： background:orange;*background:green;_background:blue;

   第三种方法：

    #example { color: #333; } /* ff */
    * html #example { color: #666; } /* IE6 */
    *+html #example { color: #999; } /* IE7 */

 

5、兼容IE/FF的透明滤镜css：
    .test {

        filter:Alpha(Opacity=40);
        -moz-Opacity:.4;
        Opacity:.4;

            }

 

6、div不换行超出隐藏...
    .text-overflow{
         display:block;
         width:31em;
         word-break:keep-all;
         white-space:nowrap;
         overflow:hidden;
         text-overflow:ellipsis;
        }

 

7、表格table不换行超出隐藏...
    table{
         width:30em;
         table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
        }
    td{
         width:20%;
         word-break:keep-all;
         white-space:nowrap;
         overflow:hidden;
         text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) / 
        }

 

8、支持ie6.0中png图片为透明
    .test {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod='crop', src="images/log.png");/*ie6*/
    background:url(../images/navi/btn_login2.png) no-repeat !important;/*ff*/
    background:none;/*ie6*/

    }

 

9、兼容ff/ie7的最小高度 

    .test {

         height:auto!important;
         height:200px;
         min-height:200px;
        }