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

Question

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

什么是 flex-wrap: wrap; 和 -webkit-flex-wrap: wrap; 的替代或等同于旧的 webkit 浏览器，如 Windows 上的 Safari 5 或Windows/Linux 上的 Midori？

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

这给了我两列的输出...标准 Bootstrap

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's implementation of flexbox does not support wrapping所以你唯一的选择是为支持它的浏览器使用 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 example (click on "Result")

方法二

如果您只对处理旧版本的 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 example (click on "Result")

也就是说...

我不会花太多时间来解决过时浏览器中的问题，因为您可能会付出很多努力而收效甚微。优雅降级是件好事，但如果您努力支持世界上所有的浏览器，您将解决很少有人(或没有人!)真正会看到的问题。