为什么<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中确定

回答

相关问题