Question

我将“zurb foundation”问题减少到以下最小代码。当我在Safari中打开带有该代码的网站时，有时并非所有图像都会加载。有时没有，有时只有一两个。在我调整浏览器窗口大小的那一刻，所有丢失的图像都会出现。

<!DOCTYPE html>
<head>
    <style type="text/css">

        p { float: left; }

        img { box-sizing: border-box;
              max-width: 100%;
              border: solid;
              }

    </style>
</head>
<body>

    <p><img src='1.jpg'></p>
    <p><img src='2.jpg'></p>
    <p><img src='3.jpg'></p>

</body>
</html>

也许这只是Safari的渲染/速度问题以及box-Sizing，float，border和max-width的组合。当我在我的文件系统中本地尝试时，似乎没有问题（快速）。在两个不同的Web服务器上，图像显示不同。

'正常'服务器： http://test5.topiclodge.com

慢速服务器： http://wiki.norm-konform.de/test/

我在3台Mac上测试它（Safari版本6.0.3和6.0.5）

也许有解决方法或任何想法？

非常感谢！

Answer 1

WebKit浏览器不喜欢没有添加宽度和高度属性的图像。为图像添加宽度和高度，然后重试。

在Safari（CSS3）中调整窗口大小之前，图像有时不会出现

1 个答案: