html - 响应式图像在 Chrome 中工作，但在 Firefox 中不起作用

Question

我正在开发一个使用响应式图像和几个固定侧边栏的网站(响应式设计的第一次尝试)。问题:响应式图像在 Chrome 中按预期工作，但在 Firefox 中根本不起作用。以下是相关页面的示例:

http://ellenflaherty.com/projects/carland/

知道为什么会出现这种差异吗？

注意:当浏览器超过 1000 像素时，响应式图像将不起作用。当适应平板电脑/手机尺寸的屏幕时，它们实际上会按预期工作。

Answer 1

我看过了，就 Firefox 而言，我建议你删除 display: inline-block 和 float: left;当您的浏览器窗口调整为更大的屏幕尺寸(例如您在问题中提到的 1000px)时，然后对于较小的屏幕尺寸，您可以重新引入显示和 float 以确保页面按应有的方式显示。

我在代码下方附加了一张图像，显示在大屏幕上删除显示和 float 后的样子。

.projectimg {
    bottom: 0;
    /* display: inline-block;  REMOVE THIS */
    /* float: left; /* REMOVE THIS */
    height: auto;
    margin-left: 220px;
    margin-right: 30px;
    overflow: hidden;
    width: 80%; /* THIS */
}

希望有帮助