html - -webkit-fill-available 不适用于 Firefox

Question

我正在尝试使用属性 height: -webkit-fill-available。

为此，我构建了这个示例 https://codepen.io/anon/pen/VJoOWW

我使用的是 Ubuntu 18.04，当我在 Chrome 上运行代码时，一切正常，但在 Firefox 中我无法让它工作。

我的 Firefox:Firefox Quantum 68.0、适用于 Ubuntu 的 Mozilla Firefox、canonical 1.0

EDIT1:使用 width: -moz-available 对布局几乎没有改变，但图像的显示方式与 chrome 不同

EDIT2:第一张图片是正确的(Chrome)。最后一张图片在 Firefox 上显示，我想在 Firefox 上以与 Chrome 相同的方式显示图像

Answer 1

您似乎正试图将图像放入包含的 div 中。您可以使用受到良好支持的 CSS 属性来做到这一点。方法有很多种，这里介绍一种。

.block {
  border: 1px solid red;
  height: 85px;
}
.img {
  margin-bottom: 10px;
  max-height: 100%;
}

<div class="block">
  <a href=''>
    <img class ="img" src="https://s3.amazonaws.com/monetostatic/email/white-label/ustrike/logo_header.png">
  </a>  
</div>