我的问题是,为什么在 IE(8 及更早版本)中标题文本没有显示在缩略图下方。在所有其他浏览器中工作正常。
HTML:
<div id="thumbsGrid">
<div class= "thumbs">
<a href="http://youtu.be/A30XhK8Vtmg">
<img src="http://www.jillmedinger.com/NCPIE/images/thumbs/shadowed/recoverythumb.png"id="1.thumb"/>
</a>
<h4><a href="http://youtu.be/A30XhK8Vtmg">Ben</a></h4>
</div>
<div class= "thumbs">
<img src="http://www.jillmedinger.com/NCPIE/images/thumbs/shadowed/recoverythumb.png" id="2.thumb"/>
<h4><a href="/NCPIE/resonator.html"> The Resonator</a></h4>
</div>
<div class= "thumbs">
<a href="/NCPIE/re.html">
<img src="images/thumbs/door2/friendsThumbs.png"id="3.thumb"/>
</a>
<h4><a href="/NCPIE/re.html">RE-Covery</a></h4>
</div>
<div class= "thumbs">
<a href="/NCPIE/divedeeper2.html">
<img src="images/thumbs/door2/divedeeper2Thumb.png"id="5.thumb"/>
</a>
<h4><a href="/NCPIE/divedeeper2.html"> Dive Deeper </a></h4>
</div>
<!--thumbsGrid close-->
</div>
CSS:
.thumbs {
float:left;
width:100px;
height:100px;
margin-right:12px;
margin-bottom:0;
border:0;
padding:0;
}
#thumbsGrid {
float:left;
width:500px;
min-height:216px;
margin-left:110px;
border:0;
padding-right:40px;
background: black;
}
.thumbs h4 a {
color: #FFF;
}
这里是现场直播:www.jillmedinger.com/NCPIE/door2.html
最佳答案
它与 .thumbs
上的 filter
有关。最简单的解决方案是将 position: relative
设置为 h4
作为 this fiddle shows .
关于css - 文本在 IE 中不显示在图像下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11782787/