不支持 flex-wrap 的旧 webkit 浏览器

Question

我当前的 html 可以很好地使用 bootstrap 4 包装和创建两列布局。问题在于不支持 bootstrap 或 flex 并使用旧版本 webkit 的旧浏览器。

什么是替代或等同于flex-wrap: wrap;和-webkit-flex-wrap: wrap;在Windows或绿旧WebKit浏览器如Safari 5在Windows / Linux呢？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row box-container">
  <div class="col-6">
    <div class="row">
      <div class="col-6">Item 1</div>
      <div class="col-6">Item 2</div>
      <div class="col-6">Item 3</div>
      <div class="col-6">Item 4</div>
      <div class="col-6">Item 5</div>
      <div class="col-6">Item 6</div>
    </div>
  </div>
</div>

这给了我两列的输出......标准引导程序

item 1   item 2
item 3   item 4

非引导浏览器，如 Midori 或使用 webkit 的旧版本 Safari 输出以下...

item 1   item 2    item 3    item 3

Answer 1

如何在 Safari 5 中获得所需的布局

Safari 5 的 flexbox 实现不支持包装，因此您唯一的选择是对支持它的浏览器使用 flexbox，并在旧浏览器中优雅地回退到另一种方法。

方法一

你可以做到这一点的一种方法是添加float: left;到.col-6（这将被浏览器忽略flex）并恢复.row到display: block;; 然后，您可以使用@supports (display: flex)将支持 flexbox 的浏览器设置回使用它。

.row {
  display: block;
}

.col-6 {
  float: left;
}

@supports (display: flex) {
  .row {
    display: flex;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row box-container">
  <div class="col-6">
    <div class="row">
      <div class="col-6">Item 1</div>
      <div class="col-6">Item 2</div>
      <div class="col-6">Item 3</div>
      <div class="col-6">Item 4</div>
      <div class="col-6">Item 5</div>
      <div class="col-6">Item 6</div>
    </div>
  </div>
</div>

JS Fiddle 示例（点击“结果”）

方法二

如果您只是对处理旧版本的 Safari 感兴趣，您可以使用CSS hack，只有那些特定版本的 Safari 才能理解以针对它们：

::i-block-chrome,
.row {
  display: block;
}

::i-block-chrome,
.col-6 {
  float: left;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row box-container">
  <div class="col-6">
    <div class="row">
      <div class="col-6">Item 1</div>
      <div class="col-6">Item 2</div>
      <div class="col-6">Item 3</div>
      <div class="col-6">Item 4</div>
      <div class="col-6">Item 5</div>
      <div class="col-6">Item 6</div>
    </div>
  </div>
</div>

JS Fiddle 示例（点击“结果”）

那说...

我不会花太多时间寻找解决过时浏览器中的问题，因为您可能会花费大量精力而获得很少的收益。优雅降级固然很好，但如果您努力支持阳光下的所有浏览器，您将解决很少有人（或没有人！）实际看到的问题。

Answer 2

如果您只需要 2 列布局并支持不支持 Flex 框的浏览器，您可以取消 Flex 框并仅使用：

display: inline-block;
width: 50%; // note: ensure you have no whitespace between elements in html

或者

float: left;
width: 50%;