margin-top/bottom% 在 Firefox 中无效

Question

我在 flex 中有 2 个 div 排列列，我希望它们的距离 = 1%，这是我的代码：

<div class="container1" style="display: flex; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom: 1%; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>

它在 IE 或 Chrome 中运行良好，但在 Firefox 中不起作用。我该如何解决？

Answer 1

请尝试此代码。

这是因为 display:flex 在 Firefox 中不能与 % 一起正常工作。所以这里需要用到display:block到container1div.

Use this code when you are using % in margin-bottom.

<div class="container1" style="display: block; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom: 1%; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>

Please try this code when you are using PX not % in margin-bottom.

<div class="container1" style="display: flex; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom: 10px; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>

Answer 2

您可以使用 px 而不是 % 来定义边距，它在任何地方都有效（所有浏览器）

<div class="container1" style="display: flex; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom:10px; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>

margin-top/bottom% 在 Firefox 中无效

margin-top/bottom % not works in firefox

css

firefox

margin

flexbox