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:expression(document.execCommand("BackgroundImageCache", false, true));    
} 

IE6一直是前端工作者的痛。如果你在定義某個層中的圖片最大寬度時，你會發現，MAX-WIDTH和MIN-HEIGHT對IE6是無效的。 

#div img{
    max-width:600px;
    min-width:600px;
    _width:expression((documentElement.clientWidth >600) ? "600px" : "auto" ); /*定義IE6最大寬度*/
    _width:expression((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;