html - 为什么 firefox 根据实际图像大小而不是 css 给出外部元素宽度？

Question

如何让图像的流体高度条纹在 Firefox 中正常工作？

我注意到在某些情况下 firefox 将图像的实际宽度提供给包含它的元素而不是 css 创建的宽度。 Chrome 运行正常。

我试图将图像放在彼此相邻的条纹上，一旦容器的高度是流动的并且不是以像素为单位设置的，就会发生这种奇怪的行为。因此，我们通过 css 将两个相邻的图像设置为相同的宽度，但都为其外部元素提供了不同的宽度。下面我放置了高度不流畅但以像素为单位的条纹，一切都恢复正常。请注意，这不会发生在 Chrome 中。

<div style="height: 20%; position: relative; white-space: nowrap">
  <div style="background: blue; display: inline-block; height: 100%">
    <img src="http://lorempixel.com/200/200/" style="height: 100%;">
  </div>
  <div style="background: blue; display: inline-block; height: 100%">
    <img src="http://lorempixel.com/400/400/" style="height: 100%;">
  </div>
</div>
<div style="height: 200px; position: relative; white-space: nowrap">
  <div style="background: blue; display: inline-block; height: 100%">
    <img src="http://lorempixel.com/600/600/" style="height: 100%;">
  </div>
  <div style="background: blue; display: inline-block; height: 100%">
    <img src="http://lorempixel.com/400/400/" style="height: 100%;">
  </div>
</div>

Answer 1

试试这个来解决你的问题

<div style="height: 20%; position: relative; white-space: nowrap">
  <div style="background: blue; display: inline-block; height: 100%; float: left;">
    <img src="http://lorempixel.com/200/200/" style="height: 100%;">
  </div>
  <div style="background: blue; display: inline-block; height: 100%; float: left;">
    <img src="http://lorempixel.com/400/400/" style="height: 100%;">
  </div>
</div>
<div style="height: 200px; position: relative; white-space: nowrap">
  <div style="background: blue; display: inline-block; height: 100%">
    <img src="http://lorempixel.com/600/600/" style="height: 100%;">
  </div>
  <div style="background: blue; display: inline-block; height: 100%">
    <img src="http://lorempixel.com/400/400/" style="height: 100%;">
  </div>
</div>