Javascript Image fadeIn不适用于Internet Explorer或Firefox

我有一个在图像中淡出的基本序列。总共有三个图像，它们是

fadeIn

。我在同一个页面中使用了同样的方法，而且它是有效的，所以我很困惑为什么它在InternetExplorer和Firefox中不起作用

这是我的代码：

//主Img延迟/fadein
$（函数（）{
var oTop=$（“#主img块段”）.offset（）.top-window.innerHeight；
$（窗口）。滚动（函数（）{
var pTop=$（'body'）.scrollTop（）；
日志（pTop+'-'+oTop）；
if（pTop>oTop）{
imgDelays（）；
}
});
});
//用于三个图像块的大小调整
$（'.home img block img'）.addClass（函数（）{
返回（this.width/this.height>1）？“宽”：“高”；
});
函数imgDelays（）{
$（'.fadeBlock1'）。延迟（300）。fadeIn（500）；
$（'.fadeBlock2'）。延迟（600）。fadeIn（500）；
$（'.fadeBlock3'）。延迟（900）。fadeIn（500）；
};

.home img块{
宽度：33.33%；
浮动：左；
显示：无；
溢出：隐藏；
位置：相对位置；
}

---

为什么在提到的浏览器中不会显示此信息？

并非所有浏览器都具有相同的

CSS

设置，并且您发现了一个常见问题，

内联块在FF中不起作用，因此您需要添加特定于moz的版本：

    display: -moz-inline-stack;
    display: inline-block;

*注意，它应该高于“正常”内联块

就我所知，IE的解决方法是：

display: inline-block;
*zoom: 1;
*display: inline;

这是一篇来自mozilla的优秀博文：
问题似乎出现在使用了
$（'body'）.scrollTop（）的scroll处理程序中。在Firefox和IE中，它似乎总是返回一个0的值，而在Chrome中，它返回的是正确的值。因此，
pTop
永远不会大于
oTop
，因此
if
总是错误的，因此根本不会调用该函数

尝试将其更改为
$（文档）。scrollTop
或
$（窗口）。scrollTop
，因为它们在Firefox、Chrome和IE中似乎都返回一个值

$(function() {
  var oTop = $('#home-img-block-section').offset().top - window.innerHeight;
  $(window).scroll(function() {

    var pTop = $(window).scrollTop();
    console.log(pTop + ' - ' + oTop);
    if (pTop > oTop) {
      imgDelays();
    }
  });
});

不过，我没有显示。
fadeIn
会不会自动将其置于块设置中？淡入不会改变标签的默认功能，我知道这是一种痛苦和痛苦。在博客帖子中查看它。。。。跨浏览器样式是这里的问题，我没有
display:inline block
任何地方。我有
显示：无。这就是为什么我对你的答案感到困惑。
内联块
适用于FF和IE（从v7/8开始）。再也不需要
-moz内联堆栈了。你指的是2009年的一篇博文。在FF和IE11中工作得非常好。我们可以把你的实际代码作为演示吗？也许你所做的事情还有其他问题。@Harry给你：。它在那里工作，只是不在FF和IE中。在最新的FF（v45）和IE 11@Becky中，该小提琴工作得很好。我刚刚更改了图像URL，因为我无法访问您的图像。你知道你必须滚动才能让它显示正确吗？你能试试
$（document）.scrollTop（）
或
$（window）.scrollTop（）
而不是
$（'body'）。scrollTop（）
，然后告诉我它是否有效<代码>$（'body'）。scrollTop（）
在FF中总是返回0，这就是它不起作用的原因。@Harry一如既往，你总是对的。就这样。我不久前就有这个问题，我希望我能想到它。谢谢创建一个答案。