html - Bootstrap：Firefox 正在破坏我的页面布局

Question

我刚刚建立了一个主要使用图像的主页，因为该站点是一个摄影站点；但是，我在 Chrome 和 Safari 中检查了该站点并且运行良好，但 FIREFOX 是另一个问题。

似乎 Firefox 在调整浏览器大小时破坏了我的布局，主要是调整图像大小。好像我已经检查了每个区域的解决方案，但无法弄清楚......

谁能帮忙？？？

我的网站是：www.theartxp.com/roze

Answer 1

问题是图像容器设置为display:inline-block这意味着它应该跨越其子项的整个大小，但是由于您试图根据父项的大小 ( max-width:100%) 限制图像的宽度，因此它们会相互抵消。容器的宽度将始终是图像的宽度。

您应该让容器 div 显示为块：

.he-wrap {
    position: relative;
    zoom: 1;
    /*display: inline-block; remove this*/
    /*position: relative; remove this too since it's a duplicate*/
}

Answer 2

w3.org 规范声明 max-width 不适用于内联元素。看起来它确实适用于替换的元素。我的错。无论如何，要解决您的问题，请将您的图像宽度更改为，width: 100%而不是max-width: 100%它工作得很好。

Meta：作为旁注，当有人提供了一个很好的修复，但不是 100% 准确的信息时，会有一个编辑按钮。大规模反对投票只会阻止贡献，而不会让 StackOverflow 变得更好。