在Firefox中破坏的弹性部分

我在flex容器内部有2个长方形的部分。其中一个矩形只有一个边距： - 17％，Firefox忽略它。有什么办法可以在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; 
}

来源

2017-05-21 Sergi

http://stackoverflow.com/q/36783190/3597276 –

你能让我知道我的答案中缺少什么吗？所以我可以调整和接受。 – LGSon

对不起，我忘了它。完美的答案。 – Sergi

火狐已经有一个bug使用一段时间后，bugzilla bug％的时候挣扎，所以我可能会建议你使用视单位来代替。

margin-top: -17vw;

Updated codepen

如果您需要向父元素调整，CSS Calc可能会有人来救如果父母尺寸/位置稍微固定。

来源

2017-05-21 18:56:40 LGSon

在Firefox中破坏的弹性部分

回答

相关问题