边距顶部/底部百分比在 Firefox 中不起作用 [重复]

Posted 2023-03-06

【中文标题】边距顶部/底部百分比在 Firefox 中不起作用 [重复]

【英文标题】：margin-top/bottom % not works in firefox [duplicate]

【发布时间】：2018-01-01 07:07:06

【问题描述】：

我有 2 个 div 在 flex 中排列列，我想要它们的距离 = 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 中无法运行。 我该如何解决？

【参考方案1】：

请试试这个代码。

这是因为 display:flex 在 Firefox 中不能很好地与 % 配合使用。所以这里需要用到display:block到container1的div。

在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>

当您使用 PX 而不是 % 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>

【讨论】：

我不知道为什么你的答案中有 -1，但它就像一个魅力，你拯救了我的一天。谢谢

【参考方案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>

【讨论】：

谢谢，我可以用 px 但我真的想用 % 代替 px

display: flex; 无法使用 %