时间戳

首页 > 解决方案 >
与 flex-direction: column 结合使用时在 Firefox 中被忽略

html -
与 flex-direction: column 结合使用时在 Firefox 中被忽略

问题描述

我遇到了一个关于 flex-direction 和 <br> 在不同浏览器中的行为的小问题。在 Chrome 中，我的 <strong> 元素和文本之间有一个空格，而 Firefox 似乎完全忽略了它们。将 Lorem Ipsum 包装在 <div> 或 <span> 中或添加多个 <br> 不会修复它。我也研究了这个话题，但找不到解决方案。

这是一个非常简单的 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），比如直接定位<br>并使其显示块/给它一个高度。将文本包装在分隔的 <div> / <span> 或其他任何内容中。

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

提前致谢！

标签： htmlcssflexboxline-breaks

解决方案

使用<br>来获得间距不是最佳做法。你应该通过 CSS 来实现它。
参考： <br /> 在 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;
}

推荐阅读