emu in blogjava

            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理 ::
            171 隨筆 :: 103 文章 :: 1052 評(píng)論 :: 2 Trackbacks
          現(xiàn)在很多網(wǎng)站都用背景圖片來實(shí)現(xiàn)hover(鼠標(biāo)經(jīng)過)切換圖片。但是IE有個(gè)該死的bug會(huì)造成超鏈接的背景圖片有時(shí)無法cache,因此在鼠標(biāo)經(jīng)過超鏈接圖片的時(shí)候就看到嘩嘩一大片的http下載請(qǐng)求

          這不像很多網(wǎng)站上描述的,是由于IE的緩存策略被設(shè)置在“每次訪問此頁時(shí)更新”了造成的,不管IE緩存策略如何設(shè)置,都無法徹底避免這個(gè)問題。

          emu試驗(yàn)了一下,發(fā)現(xiàn)用前景圖也可以實(shí)現(xiàn)老甘(他的域名貌似已經(jīng)過期,居然沒續(xù)費(fèi)……)用背景圖實(shí)現(xiàn)的類似效果,不過要多用上一些小技巧: 
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <HTML>
          <HEAD>
          <style>
              A.file
          {overflow:hidden;height:20px;width:20px;}
              A.file IMG
          {position:relative;left:-130px;top:-350px}
              A.file:hover
          {emu:expression(0)}
              A.file:hover IMG
          {left:-10px;top:-350px}

              A.file2 
          {text-decoration:none;color:gray}
              A.file2 span
          {overflow:hidden;height:20px;width:20px;}
              A.file2 span IMG
          {position:relative;left:-130px;top:-348px}
              A.file2:hover
          {color:red;height:20}
              A.file2:hover span IMG
          {left:-10px;top:-348px}
          </style>
          </HEAD>
          <BODY>
           one single icon : 
          <class="file" href="#"><img src="http://www.aygfsteel.com/images/blogjava_net/emu/1359/o_button.gif"></A>.<BR>
          an icon with text:
          <class="file2" href="#"><span><img src="http://www.aygfsteel.com/images/blogjava_net/emu/1359/o_button.gif"></span>test</A>
          </BODY>
          </HTML>

           不用背景圖的一個(gè)代價(jià)就是,再也不能css裸奔了。twinsen一定要講這是個(gè)人品問題了。有的時(shí)候,要對(duì)付IE這樣人品不好的平臺(tái),犧牲一點(diǎn)人品來換取一點(diǎn)性能上的優(yōu)化,并不是不值得考慮的吧?

          在Firefox下面比較郁悶,必須要display:block才能實(shí)現(xiàn)overflow的效果,試了下display:table等table族的樣式,都沒有辦法真正的overflow。
          posted on 2007-06-06 20:45 emu 閱讀(3675) 評(píng)論(8)  編輯  收藏

          評(píng)論

          # re: 用前景圖實(shí)現(xiàn)hover切換圖片 2007-06-07 09:37 TwinsenLiang
          有別的方法又不用,不要用這些爛招,大哥  回復(fù)  更多評(píng)論
            

          # re: 用前景圖實(shí)現(xiàn)hover切換圖片 2007-06-07 09:47 emu
          技術(shù)探討,不必這么執(zhí)著于爛不爛啦,大哥  回復(fù)  更多評(píng)論
            

          # re: 用前景圖實(shí)現(xiàn)hover切換圖片 2007-07-17 14:38 Scorr
          兩位大哥

          :)  回復(fù)  更多評(píng)論
            

          # re: 用前景圖實(shí)現(xiàn)hover切換圖片 2007-08-16 15:05 Gulu77
          想法吾錯(cuò)~,但英雄無用武之地~  回復(fù)  更多評(píng)論
            

          # re: 用前景圖實(shí)現(xiàn)hover切換圖片 2007-08-17 18:39 emu
          呵呵玩玩而已嘛,如果苛求每個(gè)創(chuàng)新都一定要有使用價(jià)值,那我們的創(chuàng)新精神就會(huì)收到壓制。  回復(fù)  更多評(píng)論
            

          # re: 用前景圖實(shí)現(xiàn)hover切換圖片 2009-05-15 16:28 藏獒價(jià)格
          CSS高級(jí)運(yùn)用哦.  回復(fù)  更多評(píng)論
            

          # re: 用前景圖實(shí)現(xiàn)hover切換圖片 2009-05-15 16:29 藏獒
          我一般喜歡把CSS寫在TABLE或DIV里,只有經(jīng)常重用的CSS我才會(huì)寫成文件.  回復(fù)  更多評(píng)論
            

          # re: 用前景圖實(shí)現(xiàn)hover切換圖片 2009-05-15 16:30 魔獸世界私服
          CSS其實(shí)難學(xué),哎..看起來不難,其實(shí)難...  回復(fù)  更多評(píng)論
            


          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 尚义县| 平凉市| 咸丰县| 康保县| 山东| 阜城县| 唐海县| 葵青区| 宜宾市| 颍上县| 麦盖提县| 遂平县| 鹤庆县| 汽车| 南康市| 龙山县| 武冈市| 勃利县| 阜宁县| 西昌市| 攀枝花市| 刚察县| 元朗区| 正安县| 贵德县| 镇巴县| 辽阳县| 历史| 平塘县| 延津县| 铁力市| 察哈| 叙永县| 大安市| 泾川县| 富阳市| 且末县| 绩溪县| 镇康县| 盐山县| 秭归县|