0

我的 CSS 有一个奇怪的场景，发生在所有浏览器中：

有时，当出现新图像时，它会使用我的 CSS 中指定的最小宽度/最小高度大小来显示。如果我只是调整浏览器的大小（拖动一个角），问题就会消失，图像会以完整、正确的分辨率正确显示。事实上，这种情况甚至不会每次都发生。当第一次看到图像时，它只会发生大约 5-10% 的时间。例如，如果我清除浏览器上的缓存然后重新加载，问题就会变得更加普遍。

这是 Chrome 元素面板的图片，显示正在应用最小宽度/高度 (10px) 而不是“自然”分辨率： 在此处输入图像描述

这是它在屏幕上的实际样子：

在此处输入图像描述

图像的边框正在通过我的 CSS 应用...

.streamifiedPostImageContainer {
    margin-top: 5px;
    overflow: hidden;
    width: 100%;
}
.streamifiedPostImage {
    float: left;
    margin-right: 8px;
    max-width: 100%;
}
.streamifiedPostImage img {
    border: 3px solid #FFF;
    max-width: 100%;
    max-height: 100%;
    min-width: 10px;
    min-height: 10px;
    box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, .3);
}

我已经使用元素面板来检查所有样式。元素面板显示 10x10 像素的“计算”大小，但所有“样式”都正确匹配我的 CSS（上图），没有说明为什么它会使用最小宽度/高度而不是（正确的）图像宽度/高度.

再一次，最奇怪的是，这只是通过拖动浏览器上的一个角或重新加载页面来修复自己。似乎在缓存的图像和应用的 CSS 之间存在某种竞争条件，因为它只发生大约 5-10% 的时间，但它确实发生在所有浏览器上。

4

0 回答 0