Question

我对Firefox处理我建立的网站的方式有疑问。我认为问题与FF测量元素高度的方式以及Stellar.js与高度的相互作用方式有关。

因此，当我在IE，Chrome或Safari中访问它时，我第一次访问它时一切都很好。您会注意到，在这些浏览器中，当您单击导航项目时，照片会显示在粉红色前景图形内的指定位置，并对它们产生视差效果。然而，当我在FF中访问它时，第一次访问的图像处于奇怪的位置。如果我点击刷新/按＆＃39; f5＆＃39;，问题会突然解决，图像都在正确的位置。但是，一旦我清除缓存并重新加载页面，图片就会再次位于错误的位置，直到我再次点击刷新。

（我建议您访问网站，除了FF之外的其他内容，这样您就可以看到我对图像位置的意思了）http://www.thelovestrange.com/

页面的基本结构是5 div的设置，如下所示：

<div class='slide' id="slide1" >

    <img class='parallaxing_image_in_background' />

    <div class='foreground' >
          <img class='portion_of_pink_foreground_image' />
    </div>

</div>

网站上几乎所有的定位和宽度/高度都以百分比表示。 .slide的大小由.foreground的宽度设置为200％控制，然后.foreground img设置宽度：100％，height：auto。因此，.foreground最终成为窗口的200％，高度是图像最终缩放到的高度。

我认为问题是FF正在读取.slide div的高度的方式。它几乎就像你第一次访问该页面一样，它没有记录.slide在加载stellar.js之前的高度是什么时候因为高度未在CSS。因此，stellar.js不知道如何正确定位元素。但是，当您刷新时，高度已被缓存，因此下次加载时，它可以正确定位元素。我可以确认，如果我在css中的.slide上设置一个高度，问题就不会发生，并且元素每次都会正确定位。问题是，如果我这样做，网站的响应性就会崩溃。

我已经尝试检查一些文档，说明FF在未声明时如何处理元素高度，但我找不到任何可以解释的内容。我试图对stellar.js对象进行一系列调整，但最后，在第一页访问中唯一能够正确定位的是如果在css中明确定义了.slide div的高度。

显然，让某人访问我客户的网站并且第一次尝试时没有正确看到它并不是一个很好的想法：）

任何想法或想法？我可以提供或测试运行的任何其他信息？我很难过。

Answer 1

我找到了解决方案：

在$（document）.ready（）调用stellar.js脚本之前，没有计算高度，因为它们基于.forground图像的高度。文档准备就绪，但图像不一定是加载的（根据我的理解）。我在$（window）.load（）中包装了stellar.js调用所以所有内容（包括图像）在尝试进行计算和放置parallaxing图像之前加载，WA LA！问题解决了。

使用Stellar.js时，绝对定位元素在FireFox中无法正确定位

1 个答案: