CSS相对绝对定位导致容器没有高度

Question

我希望创建一个包含在<ul>图像的幻灯片：

<ul> 
    <li><a href="images/01/large.jpg"><img src="images/01/default.jpg"></a></li> 
    <li><a href="images/02/large.jpg"><img src="images/02/default.jpg"></a></li> 
    <li><a href="images/03/large.jpg"><img src="images/03/default.jpg"></a></li> 
    <li><a href="images/04/large.jpg"><img src="images/04/default.jpg"></a></li> 
    <li><a href="images/05/large.jpg"><img src="images/05/default.jpg"></a></li> 
    <li><a href="images/06/large.jpg"><img src="images/06/default.jpg"></a></li> 
    <li><a href="images/07/large.jpg"><img src="images/07/default.jpg"></a></li> 
    <li><a href="images/08/large.jpg"><img src="images/08/default.jpg"></a></li> 
    <li><a href="images/09/large.jpg"><img src="images/09/default.jpg"></a></li> 
    <li><a href="images/10/large.jpg"><img src="images/10/default.jpg"></a></li> 
    <li><a href="images/11/large.jpg"><img src="images/11/default.jpg"></a></li> 
    <li><a href="images/12/large.jpg"><img src="images/12/default.jpg"></a></li> 
    <li><a href="images/13/large.jpg"><img src="images/13/default.jpg"></a></li> 
</ul> 
<style> 
    ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     position: relative; 
    } 
    li { 
     display: none; 
     list-style-type:none; 
     margin:0; 
     padding:0; 
     position: absolute; 
    } 
</style> 

你可以看到的HTML标记和CSS是相当直截了当。我遇到的问题是，尽管所有图像的大小相同，但大小并不是预先知道的。因此，我无法在<ul>上设置固定高度，但我确实必须 - 因为相对定位元素中的绝对定位元素意味着容器的高度为零，图像开始出现在其下方的内容上。

我正在使用jQuery，所以请指导我使用基于CSS和/或jQuery的解决方案。 请注意是我以前已经尝试过：

$("ul").height(
    $("ul li:eq(0)").outerheight() 
) 

但是，在文件准备好，图像不加载，因此高度未知。我也尝试添加延迟/等待$("ul li:eq(0)").outerheight() > 0，但这给IE中的问题。 IE在部分下载图像时通常会返回大于零的值，但如果该值通常低于实际图像高度，则会返回该值。让我知道你是否需要任何澄清。

Answer 1

我会说这将会是技术上更好地从对立的角度做到这一点。删除显示：无;从你的CSS，然后获取页面加载时框的高度（这样，没有JavaScript的人仍然可以看到图像）。然后，通过javascript将li的display属性设置为none。

您将获得高度和相同的功能！

Answer 2

通过这样做？

$("ul").css({ 
    height: $("ul li:eq(0)").find("img").outerheight() 
}); 

Answer 3

例如：

var width, height; 

$('ul img').load(function() { 
    width = this.width; 
    height = this.height; 
}); 

从借力回答这个问题Get the real width and height of an image with JavaScript? (in Safari/Chrome)