ie7-相对定位的div在其容器中不滚动 [英] ie7 - relatively positioned div does not scroll in its container

问题描述

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

I have a div with a scrollbar. Within it, I have various elements, one of which is an link with display:block and position:relative; Inside of this link are an img with default positioning, and an h3 tag which is supposed to appear over the top of that img, with position:absolute. When I scroll the DIV, other things scroll properly, but these elements and their contents stay fixed. Any ideas on how to solve this bug?

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

Here's a fiddle, and the approx. code is below:

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

推荐答案

快速而肮脏的修复程序将使用 overflow：auto; 属性将 position：relative; 添加到容器中。

The quick and dirty fix would be to add position:relative; to the container with the overflow:auto; property.

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

Though, I would strongly suggest you consider rethinking your layout to not rely on position absolute/relative and instead use floats if possible.

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

Updated jsfiddle: http://jsfiddle.net/Z987x/1/

这篇关于ie7-相对定位的div在其容器中不滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！