带显示的DIV：包含图像和文本的inline-block在Firefox中未缩小以适合正确 [英] DIV with display: inline-block containing image and text does not shrink-to-fit correctly in Firefox

问题描述

尝试创建响应菜单时，我遇到了以下问题。如果div包含图像和文本，并且此div具有 display：inline-block 或 float：left 宽度将小于 Firefox 中的内容宽度。

Chrome一切看起来不错。这里是 jsfiddle 。

所以问题是：有可能以某种方式修复内容流出Firefox的菜单项？也许还有其他一些解决方案，如何在如jsfiddle等菜单项中将可变宽度的图像大小调整为100％。

While trying to create a responsive menu I've stumbled upon the following problem. If a div contains an image and text and this div has either display: inline-block or float: left this div's width will be less than the content's width in Firefox.
In Chrome everything looks good. Here's jsfiddle.
So the question is: is it possible to somehow fix the content bleed out of menu items in Firefox? Maybe there's some other solution as to how one can size variable width images to 100% height in menu items such as in my jsfiddle?

推荐答案

p>我看到2种解决方案适合您的情况：

I see 2 solutions for your case:

1. 快速：

1. Quick:

• 更改 display：inline-block; 到 display：inline; 。



• change display: inline-block; to display: inline;. It seems to act like you wanted in both Chrome and Firefox.

不太快：

• 实施 clearfix解决方法

• implement the clearfix workaround

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

这篇关于带显示的DIV：包含图像和文本的inline-block在Firefox中未缩小以适合正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！