Question

以下简单的pen会在Chrome和Safari中产生不同的行为。

这是HTML代码：

<div class="row">
    <div class="col-md-6 d-flex">
        <img class="main-img" src="http://placehold.it/2000x1000.png">
    </div>
    <div class="col-md-6 d-flex">
        <p>Lorem<br><br><br><br><br>Ipsum</br></p>
    </div>
</div>

这是CSS

.d-flex{
  background-color: #999999;
}

div > img {
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
}

div > p {
  margin-top: auto;
  margin-bottom: auto;
  background-color: red;
}

特别是在Safari中，img上方和下方都没有额外的空间，而在Chrome中有一个巨大的空间

好像Chrome首先检查img高度以保留空间然后缩小img的宽度：100％ Safari首先设置宽度：100％，然后设置封闭div的高度。

如何让Chrome的行为像Safari一样？

Answer 1

由于浏览器之间的不一致，img因为弹性项目可能呈现不同的方式。

在这种情况下，请在img。

周围添加一个包装器

Updated codepen

Stack snippet

.d-flex{
  background-color: #999999;
}

div > img {
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
}

div > p {
  margin-top: auto;
  margin-bottom: auto;
  background-color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-md-6 d-flex">
    <div>
      <img class="main-img" src="http://placehold.it/2000x1000.png">
    </div>
  </div>
  <div class="col-md-6 d-flex">
    <p>Lorem<br><br><br><br><br>Ipsum<br></p>
  </div>
</div>

另一种选择是从第一个d-flex

中删除col-md-6

Updated codepen 2

灵活方框中的高度定义与响应式图像 - Chrome / Safari

1 个答案: