为什么safari会将没有空格的内联元素视为一个非常宽的单个元素？

Question

更新：我刚刚更新到Safari 9.0版（10601.1.56.2），问题就解决了。

---

有人可以解释（因为我在google中使用的关键字有太多结果）Safari是如何以及为什么特别考虑将内联元素视为没有文本或空格的一个宽元素？除了总是在元素之间添加空格/换行符之外，还有其他方法吗？

要演示，请在Safari与Chrome上查看以下代码段。在Chrome中，小猫排在另一个之下。在Safari中，顶部容器水平显示两只小猫，而底部容器在span元素之前只有一个空格，显示小猫垂直排列。

＆＃13;

＆＃13;

.container {
    width: 150px;
}

＆＃13;

<div class="container">
    <img src="http://placekitten.com/g/150/150"><img src="http://placekitten.com/g/150/150"><span></span>
</div>
<div class="container">
    <img src="http://placekitten.com/g/150/150"><img src="http://placekitten.com/g/150/150"> <span></span>
</div>

＆＃13;

＆＃13;

＆＃13;

这是一个屏幕截图，展示了Safari如何呈现代码：

测试：OSX Yosemite 10.10.3，Mac Pro（2010年中），Safari版本8.0.5（10600.5.17）。 在iOS设备上的Safari上也发现了同样的问题，我只在iPhone 5和iPhone 6 plus上测试过。