在Firefox中，inline-block的最大宽度不起作用

Question

我需要将几张图片放在一个带有固定内边距的div中。div必须水平居中。并且我需要使其具备响应性，即div的最大宽度（包括内边距）必须设置为100%。

<div class="content">
    <img src="http://placehold.it/350x150"/>
    <br/>
    <img src="http://placehold.it/250x150"/>
</div>

CSS：

body {
    text-align:center;
}
.content {
    padding:20px;
    background-color:red;
    display:inline-block;
}
img {
    max-width:100%;
    height:auto;
}

(http://jsfiddle.net/Nu8nV/)

这个示例在Chrome和Safari中运行良好，但在Firefox中却不行（当缩小宽度时图像被裁剪）。有人有解决方案吗？

- maxime schoeni

---

将 display: inline-block; 改为 display: block;。 - TylerH

不要使用<br/>标签来进行间距控制，这就是边距/填充的作用。 - Paulie_D

@TylerH，感谢您的建议，但这将破坏围绕图像的20px（或其他尺寸）填充... - maxime schoeni

@Paulie_D，我使用<br/>进行简化。原本图片应该包裹在<p>标签中。 - maxime schoeni

那么你应该更新你引用的代码，使其与实际情况相符。 - Paulie_D

实际上，我使用 <br> 不是为了间距而是为了换行，这是合法的。 - maxime schoeni

Answer 1

.content 元素显示为 inline-block，因此其宽度取决于其子元素的宽度。
在您的情况下，其子元素请求 350 像素，因此即使屏幕较小，它的宽度也始终为 350 像素。

如果它是块级元素，则其宽度将是其父元素的宽度。因此，当屏幕上没有足够的空间时，图像将被调整大小。这是 Chrome 上发生的情况。 使用块级元素的演示 如果您希望您的 .content 元素仍以 inline-block 元素的形式显示，则可以添加属性 max-width: 100%。通过这样做，您告诉它永远不要比其父元素更宽。 使用 inline-block 和 max-width 的演示 这不完全符合您的要求。默认的盒模型规定视觉宽度是 width、padding 和 border 的总和。在小屏幕上，.content 元素具有其父元素的宽度 + 自己的填充。

幸运的是，您可以使用 box-sizing 属性更改盒模型宽度。 使用 inline-block、max-width 和 box-sizing 的演示

- tzi

---

太棒了！谢谢，我完全忘记了这个box-sizing的事情。正常工作！ - maxime schoeni