css - IE 8 Div 在附加较大的子项时消失

Question

正如标题所说，这里基本上是怎么回事:

<div id='container' style='display:block; position:absolute; width:auto; height:533px;overflow:hidden;white-space:nowrap;'>
  </div>

根据用户交互 - 我做了一些工作:请求一些 JSON，构建元素，然后将所述元素附加到“容器”div。结果是这样的:

<div id='container' style='display:block; position:absolute; width:auto; height:533px;overflow:hidden;'>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
 </div>

现在发生了什么。如果 child 附加到此并且他们超过 parent 的高度。 parent 消失了。

我追求“hasLayout”和所有爵士乐 - 没有任何效果。

有效的是如果 child 的大小相同或更小 - 但由于我要完成的事情的性质，这是不希望的 - 也不能保证他们会变小。

height:auto 不起作用，但设置一个值大于最大的 child 修复此问题 - 但会扭曲我的布局

提前致谢。

编辑:图像通过 JSON 和延迟队列的组合加载。它们保证在将它们附加到容器元素之前加载。

基本上:

var img = new Image();
img.onload = function () { theContainer.appendChild(this);};
img.src = someURL;

在所有 chrome 和 FF 中工作正常

edit2:在将图像附加到主体之前和之后，我都尝试将图像附加到“容器”对象。两者都不会产生预期的结果。

编辑 3:*IE7 和 IE9 的行为与上述不同。这是 IE 8 独有的 *

Answer 1

我以前见过这个，但我不记得我是如何解决它的。您可以尝试将另一个 div 放入您的容器中并将您的图像附加到该 div 中，包装 div 通常可以解决 IE 问题。