CSS实用技巧及常见问题

 IE6背景图片缓存bug解决方法：背景图片缓存bug是IE6众多常见bug之一

a.方法一：使用Javascript脚本【推荐】

<!--[if IE 6]>  
<script type="text/javascript"><!--  
document.execCommand("BackgroundImageCache", false, true);  
// --></script>  
<![endif]-->  

b.方法二：使用CSS表达式

html {}  
{    
filter:e­xpression(document.execCommand("BackgroundImageCache", false, true));    
} 

IE6一直是前端工作者的痛。如果你在定义某个层中的图片最大宽度时，你会发现，MAX-WIDTH和MIN-HEIGHT对IE6是无效的。 

#div img{
    max-width:600px;
    min-width:600px;
    _width:e­xpression((documentElement.clientWidth >600) ? "600px" : "auto" ); /*定义IE6最大宽度*/
    _width:e­xpression((documentElement.clientWidth <600) ? "600px" : "auto" ); /*定义IE6最小宽度*/
}

HTML中的注释如果写到了CSS中，会将注释下所有的CSS失效，比如： 

 

.e_catatree{
    height:21px;
    color:#ccc;
    text-align:right;
    line-height:20px;
    border-top:1px #ccc solid;
    margin:0 20px;
}
<!-- 结束 -->
/*加入购物车后页面*/
#cartmain{
    width:958px;
    background:url(../img/bg_reg.gif) repeat-x top;
    border-right:1px #e9e9e9 solid;
    border-bottom:1px #e9e9e9 solid;
    border-left:1px #e9e9e9 solid;
    margin:5px 0;
}

以上样式中，<!-- 结束 -->注释后的CSS是无效的。。

 

 按钮按下时立体感效果:

a:hover { position:relative; top:1px; left:1px}/* 切记一定要是相对定位 */

加入收藏代码:

<script>
function addfavorite()
{
   if (document.all)
   {
      window.external.addFavorite(' http://bbs.blueidea.com',' 经典论坛');
   }
   else if (window.sidebar)
   {
      window.sidebar.addPanel(' 经典论坛', ' http://bbs.blueidea.com', "");
   }
}
</script>
<a href="#" onclick="addfavorite()">把 经典论坛加入收藏</a>

通过定义em实现小三角效果:

* {
    font-size:14px;/* 必须通配字体大小 */
}
em {
    display:block;
    font:0/0 "宋体";/* 经本人摸索,只有在宋体下才最为标准 */
    border:7px solid;/* border值越大,三角形越大 */
    border-color:#fff #fff #fff #444;/* 通过改变颜色值,可产生不同效果,自己实验 */
    margin-top:5px
}

display之line-block的HACK:

.menu{
    display:-moz-inline-stack;/* 专属FF也可以用-moz-inline-box定义 */
    *display:inline;
    zoom:1;/* 上一行和此行用于激活IE6/7的layout,实现类似效果 */
}

透明度滤镜的用法:

.navbg {
    filter:alpha(opacity=40);       /* IE */
    -moz-opacity:0.4;               /* Moz + FF */
    opacity: 0.4;                   /* 支持CSS3的浏览器（FF 1.5也支持）*/
}

 

 

 

      2.水平居中（仅限固定宽度）

     这个我想大家都会知道的，如：

div#container {margin: 0 auto;}
     3.充分利用position中的absolute和relatively

     4.居中，还是居中（纵横通杀）

div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}
     Memo：

               ·必须指定width和height的固定值；

               ·position值为absolute；

               ·分别指定top与left为50%；

               ·设置margin-top和margin-left分别height和width的负值的一半，也可以简写为：margin:-200px 0 0 -250px;