Safari 的 flexbox 中出现神秘的空白区域 [重复]答案

【问题标题】：Mysterious blank space appears in flexbox in Safari [duplicate]Safari 的 flexbox 中出现神秘的空白区域 [重复]
【发布时间】：2017-02-02 23:01:53
【问题描述】：

我正在尝试根据answer 垂直对齐网格列。但是，输出的右上角是一块神秘的空白，我不知道如何填充它。

这是我在浏览器中看到的（Safari 版本 9.1.2 (11601.7.7)）：

这是我的代码：

.equal {
  display: flex;
  flex-wrap: wrap;
}
.equal > div[class^='col-'] {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .equal2,
  .equal2 > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 1 0 auto;
  }
}

<!DOCTYPE html>
<html>

<head>
  <!-- Bootstrap -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="row equal">
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
      <div class="col-xs-6 col-lg-4">
        <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          <p>
      </div>
    </div>
  </div>
</body>

</html>

【问题讨论】：

您可以通过placing a different character in the content of the pseudo-element clearfix. 在其他浏览器中重新创建它。删除该伪元素可以解决问题。

标签： html twitter-bootstrap css flexbox

【解决方案1】：

所以这是一种不寻常的情况，似乎是 Safari 独有的。

但随着大量 Bootstrap 样式的使用，奇怪的事情可能会发生。

row wrap 容器 (row equal) 中有一组弹性项目 (div[class^="col-"])。

每个项目都有一个width: 50%、box-sizing: border-box 和margin: 0，均由 Bootstrap 应用。

在 50% 中包含内边距和边框且没有边距时，每行将容纳两个项目，并且每隔三个项目将换行。这就是 Chrome、Firefox、IE11 和 Edge 中发生的情况。

然而，在 Safari 中，第二个 flex 项目正在换行，在第一行留下一个很大的空地。

在对代码的粗略审查中，我找不到任何可以说明这种行为的原因。（我没有对应用的每个 Bootstrap 样式进行故障排除。）

但是仔细检查渲染的布局会发现第一个项目的左边距区域有一个微小的间隙（可能 1 像素）。

这个额外的空间只出现在 Safari 中并且只出现在第一个 flex 项目旁边，它强制第二个项目换行。

参考上图，容器的黄色背景显示，第一列的边框没有对齐，错位很明显。

所以我认为这可以确定问题所在。

就解决方案而言，此时我可以建议的最佳方法是将第一项的大小减小 1-2 像素，或者应用相同数量的负数 margin-left。大致如下：

.equal > div[class^='col-']:first-child {
     width: calc(50% - 1px);
}

revised fiddle

【讨论】：

谢谢！作为反馈，应用width: calc(50% - 1px); 会产生另一个奇怪的布局：screenshot，但margin-left: -1px; 只是给了我预期的结果：screenshot。