<br> 结合 flex-direction: column [重复] 在 Firefox 中被忽略

Question

我遇到了一个关于 flex-direction 和
在不同浏览器中的行为的小问题。 在 Chrome 中，我的 元素和文本之间有一个空格，而 Firefox 似乎完全忽略了它们。将 Lorem Ipsum 包装在

或 中或添加多个
不会修复它。我也研究了该主题，但找不到解决方案。

这是一个非常简单的 HTML + CSS：

.flex-col{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

<div class="flex-col">
  <strong>Hello World!</strong>
  <br/><br/><br/>
  <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>

https://codepen.io/Mosl/pen/MWbOOba

会很高兴收到提示。我尝试了各种事情（甚至是shitfixes），比如直接定位
并使其显示块/给它一个高度。将文本包装在分隔的

/ 或其他任何内容中。

当然，我可以以不同的方式构建它，但这是通过 CMS 而不是静态代码完成的。所以像这样的变种很容易发生。老实说，即使它可以以不同的方式修复，但无论如何理解它都会很高兴:)

提前致谢！

【问题讨论】：

• 在您的 div 上添加边距并删除 br
• 不应该使用br，只要改变间距就足够了——div {margin-top: 3em} 会更好。 br 可能被不同的浏览器解释为换行符而不是块级元素。见developer.mozilla.org/en-US/docs/Web/HTML/Element/br
• 哇，伙计们。我喜欢你完全无视我的解释。我很清楚我可以使用保证金。但是使用 CMS 的客户只需按 Enter 即可休息。因此，您的解决方案根本不可行或没有帮助。我可以按照不同的方式解决它，但我试图了解行为的原因......

Answer 1

使用<br> 获取间距不是最佳做法。 你应该通过 CSS 来实现它。
参考： <br /> not working in Firefox

编辑： 好像 Firefox 不支持 br 内的弹性框。
您还可以使用 div 标签和 css 来实现间距。

<div class="empty-space"></div>

.flex-col{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
 
} 
.empty-space {
    height: 2em;
}