Question

我在Flex容器中有一个带有2个矩形的部分。其中一个矩形只有一个边缘顶部： - 17％，Firefox会忽略它。有没有办法在Firefox中分配百分比保证金？（当调整窗口大小时，矩形可以很好地滑动，如果我使用像素作为边距，则不执行任何操作）。

以下是Codepen示例：https://codepen.io/SergiOca/pen/wdQYad

<div class="import-flex">

                <div class="export-rectangle">

                    <h1> Asesoramiento. </h1>

                    <p>
                         Test
                    </p>
                </div>

                <div class="import-rectangle">


                    <h1> <span> Oportunidad. </span></h1>

                    <p>
                        Test
                    </p>
                </div>

            <img src="http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg" alt="" class="import-footer-image img-responsive">    

    </div>





.import-rectangle {
    transition: ease-in-out 1s;
    position: relative;
    width: 471.7px;
    height: 409px;
    background-color: #454044;
    box-shadow: 0 0 20px 20px rgba(44, 42, 44, 0.1);
    z-index: 5;
    color: white;
    padding: 40px 50px;
    margin-top: -17%;
}

  .export-rectangle {
    position: relative;
    width: 471.7px;
    height: 407px;
    margin-right: 5%;
    background-color: #c97c60;
    z-index: 5;
    color: #454044;
    padding: 40px 50px;
}

.import-flex {
    display: flex;
    position: relative;
}

.import-footer-image {
    width: 430px;
    height: auto;
    margin: 0 auto;
    position: absolute;
    top: 93%;
    left: 30%;
    z-index: 100;
}

Answer 1

Firefox在使用百分比一段时间时遇到了一个bug，bugzilla bug，所以我建议你改用视口单元。

$('<span id="matrixVarTableInit">Default Rule Tests</span>').insertAfter( "div:contains('Default Rule').rule-name" );

Updated codepen

如果你需要调整父元素，如果父母的大小/位置有些固定，CSS Calc可能会拯救。

Firefox中的Flex部分已损坏

1 个答案: