Html 为什么图像的最大高度在除Firefox之外的所有浏览器中都有效？

看看这把小提琴：

它在chrome和safari中运行良好，只有firefox计算的高度错误，导致幻灯片不适合容器

我试图在一个绝对定位的容器内创建一组浮动的左幻灯片，但是看起来firefox将幻灯片的高度延伸到容器高度之外，就像没有给出max height:100%指令一样

这是我的html：

<div class="wrapper">
    <div class="absolute-container">
        <div class="slides">
            <div class="slide">
                <img src="https://unsplash.com/photos/WLUHO9A_xik/download"/>
            </div>
            <div class="slide">
                <img src="https://unsplash.com/photos/pYxh7-ITaq8/download"/>
            </div>
        </div>
    </div>
</div>

---

看起来像是Firefox中试图计算

宽度的bug，因为当前它是在重新缩放之前计算为原始图片的宽度。也就是说，快速解决方法是在图像上设置

max height:

，以像素为单位，而不是以相对像素为单位

我在显示方面遇到了问题：桌子和最小/最大高度。尝试将其设置为display:block，然后查看是否对其进行排序。然后修复由该更改引起的其他问题

--因为这两个元素的宽度大于100%？但是图像的高度超出了容器，容器应该有“bottom:30px”；但是它超出了包装器。我已经尝试过了，但看起来Firefox甚至在我的Javascript启动之前就在计算“slide”宽度。我的JS根据浏览器窗口的大小来计算图像的像素高度。嗯，我并没有完全遵循您的用例。因此，上面的这个SCS不是预先编译并在标题中链接的，而是从JavaScript应用的？不，不，JSFIDLE只是一个小例子，仅用于说明我网站上的内容。在我的网站上，我尝试了各种JS和CSS解决方案，但似乎都没有解决这个问题。这就是我为什么写这篇文章的原因，我没有看到全部情况。设置最大高度（以像素为单位）以问题中所示的形式解决了这个问题（我并不喜欢这个解决方案）。我还尝试了其他一些技巧来强制FF在额外的过程中重新计算div，但到目前为止没有任何效果。我知道这不符合SO的精神，但也许是时候给你的站点提供一个链接了，这样我就可以看到其他交互，并理解为什么将维度固定为常量值不是一个选项。

.wrapper {
    width: 900px; 
    height: 250px; 
    background-color:#aaa; 
    position:relative;    

    .absolute-container {
        position: absolute; 
        top: 30px; 
        bottom: 30px; 
        background-color: #DBD9C7; 
        width: 100%;
        height: 100%;
    }
}
.slides {
    height: 100%;
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

.slide {
    float:left; 
    height: 100%;
    margin-right: 5px;
    img {
        max-height: 100%; 
        max-width: 100%; 
        width: auto; 
        display:block;
    }
}