html - 为什么图像的最大高度适用于除 Firefox 以外的所有浏览器？

Question

看看这个 fiddle :http://jsfiddle.net/2fhbjszn/4/

它在 chrome 和 safari 中工作正常，只有 firefox 计算高度错误导致幻灯片不适合容器。

我正在尝试在绝对定位的容器内创建一组 float 的左侧幻灯片，但它看起来像 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>

这是我的 CSS:

.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;
    }
}

Answer 1

看起来像是 Firefox 中试图计算 <div class="slide"> 的错误宽度，因为目前它是在重新缩放之前计算为原始图片的宽度。也就是说，快速解决方法是设置 max-height:在图像上以像素为单位而不是相对。