css：Chrome和Safari中不同的列容器高度（引导程序4）答案

【问题标题】：css: different column container height in Chrome & Safari (bootstrap 4)css：Chrome和Safari中不同的列容器高度（引导程序4）
【发布时间】：2018-03-13 23:49:07
【问题描述】：

我有这样的代码（它是一个原型，在实际应用中一切都不同，但架构相同）：

  <body>
    <div class="row">
      <div class="col-3 d-none d-sm-block">
        <div class="h-100" style="background:red">
          123123
        </div>
      </div>
      <div class="col-3 d-none d-sm-block">
        asdasdasd <br> asdasdasd <br> asdasdasd
      </div>
    </div>
  </body>

https://plnkr.co/edit/TyrOGOCNBHePtbxH6xYN?p=preview

我正在使用引导程序 4。

但在 Chrome 中一切都很好：

不在 Safari (v10.1) 中：

我做错了什么？是否可以在不重建我的 DOM 的情况下更改这种样式？所以高度应该和 Chrome 中的一样

【问题讨论】：

我没有 Safari，所以无法自己测试，所以在发布答案之前我想知道这是否有效：plnkr.co/edit/MlIfOIl6OKyPgtm9lTbQ?p=preview
@LGSon 不不不。请不要将 -block 更改为 -flex
首先，它有效吗？ ...其次，解释为什么需要阻止。
@LGSon 谢谢。但不是我的一个案例。见评论。

标签： html css flexbox bootstrap-4

【解决方案1】：

使用给定的代码，这将无法在 Safari 上运行。

原因很简单，当您在内部div 上设置h-100 (height: 100% !important) 时，百分比值将基于父级的设置高度，在这种情况下没有设置高度，因此计算值为auto。

其他浏览器似乎使用col-3 flex item 元素及其父元素的align-items: stretch 的计算高度，因此它可以工作。

这个例子证明，如果你将align-items设置为flex-start，在其他浏览器中也会失败：https://plnkr.co/edit/LqSqK4j4GhpDbkc4E0i5?p=preview

更好的方法是正确使用 Bootstrap 4 和 Flexbox 模型，在这种情况下，对于 flex 行项目，它有其 align-items。它的默认值是stretch，和height: 100%做的事情完全一样。

由于块元素没有任何事情可以用 flex 元素做，只需将 h-100 更改为 w-100 并将 d-sm-block 更改为 d-sm-flex 即可。

Updated plnkr

堆栈sn-p

<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

    <h1>Hello Plunker!</h1>
    
    <div class="row">
      <div class="col-3 d-none d-sm-flex">
        <div class="w-100" style="background:red">
          123123
        </div>
      </div>
      <div class="col-3 d-none d-sm-flex">
        asdasdasd <br> asdasdasd <br> asdasdasd
      </div>
    </div>

比使用w-100 (width: 100%) 更好的方法是使用flex: 1。由于 Bootstrap 的 col 规则可以做到这一点，但也有填充，您可以创建自己的一个，这里称为 flex-1。

.flex-1 {
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

https://plnkr.co/edit/ODeYcUgEDdZjysnCQSYB?p=preview

或者将col 与删除填充的新规则结合使用，这里称为nopadding

.nopadding {
  padding: 0;
}

https://plnkr.co/edit/jj07PrEVXDMW2eRLw4Ti?p=preview

【讨论】：

不，这至少在一种情况下不起作用，我将向您展示代码，正是我的意思
@brabertaser19 那太好了。
plnkr.co/edit/gQdLjTVH2N70AFOYfqiJ?p=preview 例如 - 这在 Safari 中不起作用（但在 Chrome 中 - 没关系）
@brabertaser19 这在 Safari 中是如何工作的 plnkr.co/edit/BgO2ENwlQgATzOi40TPf?p=preview ... 如果你检查我在 CSS 中的一些注释，你会发现你使用了一些错误的属性，这是主要原因它不会跨浏览器工作。不幸的是，其中一些东西仍然可以在 Chrome 中使用，但它不应该这样做。
@brabertaser19 这是一个在 IE 中也可以使用的版本......也应该在 Safari 中使用 plnkr.co/edit/Qg872PA3Iz2rbK0YclRK?p=preview

【解决方案2】：

您没有做错任何事，Bootstrap 只是为其列使用了 Safari 未涵盖的供应商前缀。

列的默认引导属性是：

-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;

我没有 Safari，因此无法验证这一点，但您应该只需添加：

.col-3 {
  display: -webkit-flex;
}

Safari 10.1.1 及以上版本supports flexbox，因此这将强制 Safari 以 flexbox 布局呈现列，从而解决高度问题。

希望这会有所帮助！

【讨论】：

Safari 从版本开始支持无前缀 Flexbox。 9
另外，添加display: -webkit-flex 没有任何区别，因为已经设置的d-sm-block 使用!important ...顺便说一句，我没有投反对票:)