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

时间:2014-11-25 00:07:34

标签: html css css3 firefox layout

看看这个小提琴:http://jsfiddle.net/2fhbjszn/4/

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

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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