使用safari的CSS / JavaScript滑块动画问题

Question

我正在为客户建立一个网站，我正在使用this tutorial

中的代码

我的客户很遗憾不允许我发布我当前工作的链接，因为它有敏感信息。然而，上面是我正在使用的一个明显的例子。

问题：

我正在使用文本作为滑块上图像旁边的描述。他们目前使用保证金坐在每个图像旁边，并有自己的div。在Safari中，这个文本会扭曲并超出文本的顶部，似乎忽略了我放下的规则，无论是坐在图像上还是向右移动。我不知道为什么它这样做，并且在其他浏览器中根本不会发生。我已经改变了java变量，所以整个容器更大，但这似乎没有区别。奇怪的是，在某些场合，它在刷新页面时显示正常，但似乎没有这种模式，我也没有在时间线中看到任何奇怪的东西。如果有人能够阐明为什么会发生这种情况，或者可能指出我的方向，这将是伟大的。客户希望在Safari浏览器上展示网络解决方案，不幸的是，我对此浏览器的内部工作经验不足。

Link to a copy of the work without sensitive information but still has the issue

Answer 1

1. 使用div＃photo
2. 将{css用于div#photo div {float:left}
3. #photo本身必须向左浮动才能以水平方式堆叠它们

HTML：

div#album                      {min-width:1000px,min-height:200px}
div#album div                  {float:left,min-width:100px}
div#album div#photo            {min-height:200px}
div#album div#photo div        {float:left}
div#album div#photo div#image  {min-height:200px,min-width:100px}
div#album div#photo div#text   {min-height:50px,min-width:75px}

如果仔细查看尺寸，我给出了一种格式， 它显示的是“确保你的文本div的高度不超过父母或兄弟姐妹”

我所展示的是儿童的宽度，身高应该比父母要小，因为当使用“浮子”时，他们会溢出