Question

问题是Firefox中没有显示填充底部。

如果容器具有带flex值的显示属性，则子元素中的Margin-bottom无效。（显示：块没问题。）

仅在Firefox中发生。在其他浏览器中，祖先的padding-bottom和后代的margin-bottom会出现。

请告诉我，为什么会这样。我已经阅读了规范，但找不到答案。

http://codepen.io/anon/pen/XdeOzy?editors=1100

HTML：

<div class="wrap">
    <div class="modal">
        <b>[BEGIN]</b> Lorem ipsum dolor sit ... <b>[END]</b>
    </div>
</div>

CSS：

* {
    box-sizing: border-box;
}

.wrap {
    position: fixed;
    top: 0;
    left: 0;

    display: flex;
    width: 100vw;
    height: 100vh;

    padding: 20px; /* padding-bottom is not displayed in FF */
    overflow-y: scroll;

    background: rgba(0, 0, 0, .6);
}

.modal {
    width: 400px;
    margin: auto;

    /* in the FF it works only when .wrap element
       has display property with block value, not flex */
    /* margin-bottom: 20px; */

    padding: 20px;

    background: #fff;
}

Answer 1

我不得不说，这是一个非常特殊的错误......我以前没见过。似乎问题在于当模态元素与包装器不能很好地配合时元素的重叠不良。可以通过以下方式修改CSS来修复它：

.wrap{
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    background: rgba(0, 0, 0, .6);
}
.modal{
    width: 400px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
}

Firefox：padding-bottom没有显示在带溢出的固定定位元素中：在flex容器上滚动

1 个答案: