图像在首次加载Safari时出现错误对齐

Question

我有以下代码：

<div class="altimages">


    <div class="altimgbox spacer">
      <a class="gallery cboxElement" href="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_6723_1024x1024.jpg?v=1402772641" title=""><img src="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_6723_large.jpg?v=1402772641" alt="Waltz" title=""></a>   
    </div>  




    <div class="altimgbox spacer">
      <a class="gallery cboxElement" href="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_6751-768x1024_1024x1024.jpg?v=1402772644" title=""><img src="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_6751-768x1024_large.jpg?v=1402772644" alt="Waltz" title=""></a>   
    </div>  




    <div class="altimgbox spacer">
      <a class="gallery cboxElement" href="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_6758-768x1024_1024x1024.jpg?v=1402772647" title=""><img src="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_6758-768x1024_large.jpg?v=1402772647" alt="Waltz" title=""></a>   
    </div>  




    <div class="altimgbox ">
      <a class="gallery cboxElement" href="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_4933_1_1024x1024.JPG?v=1402876174" title=""><img src="//cdn.shopify.com/s/files/1/0296/9253/products/IMG_4933_1_large.JPG?v=1402876174" alt="Waltz" title=""></a>   
    </div>  



  </div>

使用以下CSS：

    .altimages{
  clear:both;
  width:800px;
  padding-left:40px;
  min-height:100px;
  float:left;
  margin-bottom:30px;
}

.altimgbox{
 width:192px;
  height:192px;
  margin-top:10px;
  overflow:hidden;
  display:inline-block;
}

.spacer{
 margin-right:6px; 
}

.altimgbox img{
 width:300px;
  margin-left:-60px;

}

这似乎与Chrome＆amp; Firefox但是当首次在Safari中加载页面时，图像会被错误对齐。当你重新加载页面时，一切正常（这与在css之后加载图像有什么关系？

您可以在此处查看实时网址：http://www.fiercelycurious.com/collections/susan-weinthaler/products/waltz

谢谢！