爲什麼<a>與背景消失在IE中，但它可以在Firefox中確定

在Firefox中，我可以看到與背景img的內容，但在IE中看到一個空白。因爲我不能在這裏發佈圖像，所以我把「xxx 「而不是在代碼和css 和這裏的IMG url是屏幕顯示圖像的URL在comment.thanks很多爲什麼<a>與背景消失在IE中，但它可以在Firefox中確定

HTML

<div class="media-queue"> 
    <ul style="width: 270px; left: 0px;" id="media-list"> 
     <li class="img"> 
      <div class="pic"> 
       <img width="117px" height="70px" src="xxx"> 
       <div class="remove" style="display: none;"></div> 
      </div> 
      <input type="text" placeholder="say sth" value="" class="txt"> 
     </li> 
    </ul> 
    <div class="media-page"> 
     <a pid="0" href="javascript:void(0)" class="page"></a> 
     <a pid="1" href="javascript:void(0)" class="page page-selected"></a> 
    </div> 
</div>

CSS

.media-queue { 
    float: left; 
    height: 132px; 
    overflow: hidden; 
    position: relative; 
    width: 545px; 
} 

#media-list { 
    height: 103px; 
    left: 0; 
    position: absolute; 
    top: 0; 
} 

#media-list li.img { 
    background: none repeat scroll 0 0 #FFFFFF; 
    height: 102px; 
    overflow: visible; 
    padding: 0 4px; 
    position: relative; 
    width: 117px; 
} 

#post-box #media-list li { 
    float: left; 
    margin-left: 10px; 
} 

li { 
    list-style: none outside none; 
} 

#media-list .pic { 
    height: 70px; 
    margin-bottom: 5px; 
    overflow: hidden; 
    width: 117px; 
} 

#media-list .pic img { 
    display: block; 
    height: 70px; 
    width: 117px; 
} 

#media-list li.img .remove { 
    background: url("images/xxx") no-repeat scroll 0 0 transparent; 
    cursor: pointer; 
    display: none; 
    height: 19px; 
    position: absolute; 
    right: -5px; 
    top: -5px; 
    width: 19px; 
} 

#media-list .txt { 
    border: 1px solid #DEDEDE; 
    color: #999999; 
    float: left; 
    height: 20px; 
    line-height: 20px; 
    margin-left: 0; 
    padding-left: 0; 
    width: 108px; 
} 

.media-page { 
    bottom: 2px; 
    height: 15px; 
    position: absolute; 
    right: 5px; 
    text-align: right; 
} 

.media-page .page { 
    background: url("images/xxx") no-repeat scroll 0 0 transparent; 
    font-size: 0; 
    line-height: 0; 
    margin-left: 10px; 
    padding: 7px 7px 8px 8px; 
} 

.media-page .page-selected { 
    background-position: 0 -16px; 
}

來源

2012-02-21 user1222589

這裏是IE和firefox的截圖：http：//static.blueidea.com/attachment/forum/201202/21/1345452wqaarpzaj5jjuu3.jpg http://static.blueidea.com/attachment/forum/201202/21 /134545dc911gatad9dtrrd.jpg – user1222589 2012-02-21 08:22:14

您必須將a設置爲display:block！也許給它一些高度和寬度！

Here's WHY：內聯對象具有其內容的寬度值，並且定位標記是內聯對象。因此：沒有內容=沒有寬度值=沒有「頁面按鈕」。

來源

2012-02-21 08:23:19

爲什麼<a>與背景消失在IE中，但它可以在Firefox中確定

回答

相關問題