當ie7不認!important之後 [佈局的解決辦法]_經驗交流

在IE7之前,我們在佈局時常用!important來解決IE和FF之間的差別; 但是在IE7出來之後,!important對IE7就不起作用了,而有些時候IE7的解釋方法又與FF和IE6不同;這時新的問題就出現了;用!important可以解決IE6但是解決不了IE7; 這樣在不同的瀏覽器中看到的同一個網頁的效果就不同了;

這是前天作版面時的一個問題;可以先看一下效果;http://www.zishu.cn/blogview.asp?logID=553 

或是運行下邊的程式碼也可以同樣看到效果:

複製程式碼 程式碼如下:

;


正文{ 字體大小：12px; 行高：1.8； 字體系列：Verdana、「宋體」、Arial、Sans； 文本對齊：居中； 背景：#FFF； 顏色：#666； 邊距：50px； 填充：0； 列表樣式：無； }
a：鏈接，a：訪問過{顏色：#000099; 文字裝飾：下劃線;}
a:hover,a:active{color:#000;文字裝飾：無；}
#zishu_test li{ float:left; 寬度：14%；文字對齊：居中； 保證金：0 自動； list-style:none}
#zishu_test li a{border-right:1px solid #fff;border-bottom:1px solid #fff; 寬度：100px；  填色：10px； 邊距：自動}
#zishu_test li img{ width:75px; 高度：75px； 顯示：區塊； 文字對齊：居中； 邊距：自動；邊框：1px Solid #D8A18B;}
#zishu_test li span{display:none;}
#zishu_test li a:hover span{ margin-top:-10px;displock; ; 右邊框：1px 實心#666； 背景：#FA9000； 寬度：100px； 顏色：#FFF； 位置：絕對； } 
* html #zishu_test li: a: 
* html #zishu_test li: a: 
* html== * IE6 */ 
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/ 
#zishu_testorder li:hover{ bxRx border-bottom:1px solid #D8A18B; 寬度：100px； 高度：110px； 背景：#F5F5F5；顯示：區塊； padding-top:10px;} 


片>

  

;
    
• 64d / 47 點擊率pixu

    
• 24d / 35 點擊率秀才

    
• 66d / 87 點擊率明確

    
• 40d / 34 點擊率 LIVID

    
• 47d / 56 點擊率老孟

    
• 42d / 36hits小玉

    
• 63d / 67 點擊率pixu

  

身體>

在這個例子中,如果我把
 程式碼
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/ 
這行刪除;那麼在IE7中;就會有差別了;

為了解決這個問題,我看了;http://www.blueidea.com/tech/site/2006/3626.asp 裡邊的一種方法; 但是如果程式設計師和佈局人不是同一個人的話;這樣的方法很不好控制; 於是才有了下邊的方法;

以下是程式碼; 
 程式碼

複製程式碼 程式碼如下:

* html #zishu_test  a:hover ginsppanft; /* IE6 */  
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/  

「*+html」被ie7與ie5.01所使用，而區分ie7與ie5.01又有很簡單的方法,便是important,把important寫在前面，這樣才能形成了單獨針對ie7 hack的方法了。

例如：

*+html div.IE7 { 
width:200px; !important; 
width:100px
};