Question

它在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>

这是我的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:，而不是相对。

Answer 2

我遇到了显示问题：表格和最小/最大高度。尝试将其设置为显示：阻止并查看是否对其进行排序。然后修复由该更改引起的其他问题！

除了Firefox之外，为什么图像的最大高度在每个浏览器中都有效？

2 个答案: