ie7 - 相对定位的div不会在其容器中滚动

Question

我有一个带滚动条的div.在其中,我有各种元素,其中一个是显示链接:块和位置:相对; 这个链接的内部是一个带有默认定位的img,以及一个应该出现在img顶部的h3标签,其位置为:absolute.当我滚动DIV时,其他东西正确滚动,但这些元素及其内容保持不变.关于如何解决这个bug的任何想法？

这是一个小提琴,大约.代码如下:

http://jsfiddle.net/Z987x/

<a class="slider_link" data-ident="herb-garlic-roast-tenderloin" href="http://superfadlabs.com/clients/carapelli/recipes/herb-garlic-roast-tenderloin">


  <img class="slider_image" src="http://superfadlabs.com/clients/carapelli/images/sections/recipes/share_carousel_images/tenderloin.jpg" alt="Herb &amp; Garlic Roast Tenderloin" style="
    left: 0px;
    top: 0px;
    display: block;
">

  <h4>Herb &amp; Garlic Roast Tenderloin</h4>
</a>

a.slider_link { 
    width:190px; height:220px; position: relative; display: block; margin-bottom:10px;
    h4{ .cubano; font-size:1.8em; position: absolute; color: #fff; top:11px; left:14px; line-height: 110%; padding-right:10px; height:40px; overflow: hidden; }
}

Answer 1

快速而肮脏的修复方法是position:relative;使用overflow:auto;属性添加到容器中.

虽然,我强烈建议你考虑重新思考你的布局,不要依赖绝对/相对位置,而是尽可能使用浮点数.

更新了jsfiddle:http://jsfiddle.net/Z987x/1/