jquery - CSS Relative-Absolute定位导致容器没有高度

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

我想说，从相反的 Angular 进行操作在技术上会更好。移除显示:无；从你的 CSS，然后在页面加载时获取框的高度(这样，没有 javascript 的人仍然可以看到图像)。然后，通过 javascript 将 li 的显示属性设置为 none。

您获得了高度和相同的功能!