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

Question

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

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

<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

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

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

或

float: left;
width: 50%;

Answer 2

您好，我已检查您在问题中提到的旧版本浏览器，此代码根据您的需要显示内容。

.row {
  display: box;
  display: -webkit-box;
  -webkit-box-lines: multiple;
  display: run-in;
}
.col-6 {
  -webkit-box-flex: 0.0;
  -webkit-box-flex-group: 2;
  -webkit-box-lines: single;
  float: left;
}

但问题是它会影响所有浏览器的最新版本。在博客中，我还读到 Safari 5 for windows 或 Midori windows/linux 不支持 flexbox 的新语法，它支持旧语法。博客链接：https://caniuse.com/#feat=flexbox.

Answer 3

从技术上讲，Safari 5 中的flex-wrap:wrap; 或-webkit-flex-wrap:wrap 的等价物应该是-webkit-box-lines:multiple，然后是当前的2009 flex-box specs。但是，根据我的测试和其他可靠来源 (caniuse.com)，这不是行不通。

在尽可能多的浏览器中一致地复制 flex-wrap 行为的最佳方法是在灵活容器的每个兄弟姐妹上使用 display:inline-block css 规则。 flex-box 版本和 inline-block 版本之间没有太大区别，除了在 inline-block 版本中的每个元素之间自动添加 1em 空间。

/*Asthetic code starts*/
html{
  font-family:sans-serif;
}
div div{
  margin:2.5px;
  padding:5px;
  background:#f2f2f2;
}
/*Asthetic code ends*/
/*Actual code*/
.container-1{
  display:flex;
}
.container-2 div{
  display:inline-block;
}

<h3>Flex-box example</h3>
<div class="container-1">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
</div>
<h3>Same thing implemented using <code>inline-block</code></h3>
<div class="container-2">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
</div>

Answer 4

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

Safari 5's implementation of flexbox does not support wrapping 所以你唯一的选择是在支持它的浏览器上使用 flexbox，并在旧浏览器中优雅地回退到另一种方法。

方法 1

您可以这样做的一种方法是将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")

方法2

如果您只是对处理旧版本的 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")

也就是说……

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