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

Question

我想创建

中包含的图像幻灯片：

<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 非常简单。我遇到的问题是，虽然所有图像的尺寸相同，但尺寸是事先未知的。因此，我无法在

上设置固定高度，但我确实必须这样做——因为相对定位元素内的绝对定位元素意味着容器的高度为零，并且图像开始出现在上方其下方的内容。

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

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

但是，在文档准备好时，图像未加载，因此高度未知。我还尝试添加延迟/等待 $("ul li:eq(0)").outerheight() > 0 但这会在 IE 中带来问题。当 IE 部分下载图像时，它通常会返回大于零的值，但该值通常小于实际图像高度。如果您需要任何说明，请告诉我。

Answer 1

我想说从相反的角度来做这件事在技术上会更好。去掉显示：无；从你的 CSS 中，然后在页面加载时获取框的高度（这样，没有 JavaScript 人们仍然可以看到图像）。然后，通过 javascript 将 li 的显示属性设置为 none。

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

Answer 2

例如：

var width, height;

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

借用这个问题的答案 用JavaScript获取图像的真实宽度和高度？ （在 Safari/Chrome 中）

Answer 3

并通过这样做？

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