带显示的DIV：包含图像和文本的内联块在Firefox中无法正确缩小

Question

在尝试创建响应式菜单时，我偶然发现了以下问题。如果div包含图片和文字，并且此div有display: inline-block或float: left，则此div的宽度将小于Firefox中内容的宽度。<登记/> 在Chrome中一切都很好看。这是jsfiddle 所以问题是：是否有可能以某种方式修复Firefox中菜单项的内容流失？也许还有一些其他的解决方案，如何在菜单项中将可变宽度图像的大小调整到100％高度，例如在我的jsfiddle中？

Answer 1

我为您的案例看到了两种解决方案：

1. 快速：

   • 将display: inline-block;更改为display: inline;。它似乎就像你想要的Chrome和Firefox一样。

2. 不那么快：

   • 实施clearfix workaround

3. 修订回答：https://jsfiddle.net/ukbu9gvk/2/

Answer 2

这个问题已得到解答，但我不能发表评论，并认为OP可以使用一些澄清，考虑到他的意外解决方案可行。

了解the height property的工作原理，我们看到，在百分比高度的情况下：

  

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

什么符合＆＃34;生成的包含块＆＃34;解释here。

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

希望有所帮助。