Html 带显示的DIV：包含图像和文本的内联块不会收缩以适合Firefox

在尝试创建响应菜单时，我偶然发现了以下问题。如果一个div包含图像和文本，并且此div具有

显示：内联块

或

浮动：左

此div的宽度将小于中的内容宽度。
铬合金的一切看起来都很好。这是。

---

所以问题是：是否有可能以某种方式修复Firefox中菜单项的内容泄漏？关于如何在菜单项中（例如在我的JSFIDLE中）将可变宽度图像大小调整为100%高度，可能还有其他解决方案。

我看到两种解决方案：

快速：

• 更改

  显示：内联块到
  显示：内联。在Chrome和Firefox中，它看起来都像你想要的那样

不那么快：

• 实施

订正答复：

---

这个问题已经得到了回答，但我无法发表评论，我认为OP可能需要一些澄清，因为他对解决方案会奏效感到惊讶

阅读工作原理，我们发现，在百分比高度的情况下：

百分比是根据生成的长方体包含块的高度计算的

说明了“生成的框的包含块”的定义

在这种情况下，图像的包含块实际上是页脚菜单div，因为图像的直接父项（菜单项div）被设置为“inline”。因此，根据页脚菜单div的高度计算图像的高度

---

希望有帮助。

1。我需要菜单项有他们的父母100%的高度，这样就不会做。2.Clearfix在这种情况下似乎没有做任何事情。请参阅解决方案3，也许这会有所帮助。我只是在玩弄名称的填充。嗯，菜单项名称的填充似乎无关紧要。但有趣的是，具有

display:inline

和

height:100%

的菜单项以某种方式将计算出的高度值从其父图像传递到其子图像，该子图像也具有

height:100%

，这反过来将菜单项的高度拉伸到其父图像高度的100%，这正是我所需要的。我认为在内联元素上设置任何高度都是浪费字节。如果没有人给出不那么模糊的答案，我会在一段时间后接受你的答案。嗯，看起来从内联菜单项中删除

height:100%

仍然可以让儿童图像具有所需的高度。奇怪的