IE的CSS問題

我有這個網站IE的CSS問題

<div class="p-box"> 
     <div class="p-img"></div> 
     <h3>title</h3> 
     <div class="txt">some txt</div> 
    </div>

這個CSS。

.p-box { 
    width:253px; 
    height:155px; 
    position:relative; 
    float:left; 
    overflow:hidden; 
    background: url(../images/p-box-bg.png) top left no-repeat; 

} 
.p-box h3 { 
    color:#FFF; 
    width:253px; 
    text-align:center; 
    font-size:12px; 
    height:22px; 
    line-height:22px; 
    display:block; 
} 
.p-img { 
    position:absolute; 
    top:1px; 
    left:1px; 
    width:253px; 
    height:155px; 
    z-index:5; 
    background: url(../images/p-img-bg.png) top left no-repeat; 

} 
.p-box .txt{ 
    width:249px; 
    height:20px; 
    background: url(../images/p-img-txt-bg.png) top left no-repeat; 
    position:absolute; 
    bottom:2px; 
    left:2px; 
    z-index:50; 
    text-align:right; 
    color:#FFF; 
    font-size:12px; 
    line-height:20px; 

}

在firefix一切ok，但在IE中我看不到我的H3在p-IMG和P-IMG不覺得容器溢出.. 誰能幫助我？ Thx。

來源

2011-04-05 Ste

嘗試在h3上設置更高的z-index。 – Kyle 2011-04-05 13:54:33

這到底意味着什麼？如果沒有圖像進入p-img，除了css中的背景，爲什麼不移除位置和z-index，並將其他兩個項目放在p-img中？ – DouglasMarken 2011-04-05 14:00:58

我會推薦你的H3，將它設置爲更具體的東西，即：一個ID。完成後，將背景圖像設置爲新的id標籤，而不是css中的H3元素。因此：

.p-box #h3image { 
    color:#FFF; 
    text-align:center; 
    font-size:12px; 
    display:block; 
    enter code here 
    width:253px; 
    height:22px; 
    padding-top: 133px; 
    z-index:5; 
    background: url(../images/p-img-bg.png) top left no-repeat; 
}

請注意，padding-top 133 px + height爲22px將使容器的整個高度爲155px;成爲你的形象的大小。由於頂部的填充是133，因此文本將保留22px，因爲圖像是背景，文本處於前景，完全符合標準並且與瀏覽器兼容。

來源

2011-04-05 13:57:56

some作爲暗示articles與IE的z索引錯誤，得到H3元件高z索引（至少比給予.p-img z-索引= 5更高）。

來源

2011-04-05 14:04:52

回答

相關問題