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

【问题标题】：ie7 - relatively positioned div does not scroll in its containerie7 - 相对定位的 div 不在其容器中滚动
【发布时间】：2012-12-09 06:57:21
【问题描述】：

我有一个带有滚动条的 div。在其中，我有各种元素，其中一个是与 display:block 和 position:relative; 的链接。此链接内部是一个具有默认定位的 img，以及一个应该出现在该 img 顶部的 h3 标签，其位置为：absolute。当我滚动 DIV 时，其他东西滚动正常，但这些元素及其内容保持不变。有关如何解决此错误的任何想法？

这是一个小提琴，大约。代码如下：

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; }
}

【问题讨论】：

标签： css internet-explorer internet-explorer-7 scroll css-position

【解决方案1】：

快速而肮脏的解决方法是将position:relative; 添加到具有overflow:auto; 属性的容器中。

不过，我强烈建议您考虑重新考虑布局，不要依赖绝对/相对位置，而是尽可能使用浮点数。

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

【讨论】：