-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，规范1.0

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

EDIT2：第一张图像正确（Chrome）。最后一张图片显示在Firefox上，我想以与Chrome浏览器相同的方式在Firefox上显示该图片

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>

Answer 2

您可以简单地将height: inherit;赋予<img>，当然也可以赋予其包装<a>，您会发现它的工作原理与chrome完全相同。 另外，在这里删除width: -moz-available;没用。 使用这种方法，您将不再需要height: -webkit-fill-available;。 希望对您有所帮助。