Question

好的，我已经把它缩小到$(window).scroll的某个问题，似乎在这里的网页代码中：

$(window).scroll(function() {
    var $width = $(window).scrollTop() > $("#header_image").outerHeight() ? .92 * $(window).width() : .92 * $(".content").width();

    sMenu.toggleClass('sticky', $(window).scrollTop() > $("#header_image").outerHeight());
    $(".menu").children("li").resizelis($width);
});

如何解决这个问题？

如果你去这里：http://opportunityfinance.net/Test/conference/index.html（忽略滑块在该页面上的显示方式，这完全是另一个故事）。您可以浏览菜单中的任何页面，以在Microsite的所有页面中查看相同的问题。

您会看到每次进入任何菜单项并将鼠标悬停在任何链接上时，页面本身都会出现故障并导致其抖动。怎么解决这个问题？这些页面在IE 8浏览器的实际网站上没有遇到此问题：http://opportunityfinance.net/conference-2013/index.html

只有更改的内容是添加jQuery.fn.extend代码并更改整体字体大小，此处：

jQuery.fn.extend({
    resizelis: function(xWidth) {
      var mButtons = this.length;
      var buttonSize = (xWidth / mButtons);
        return $(this).each(function() {
            $(this).css("width", buttonSize + "px");
            $(this).children("a").css("width", buttonSize + "px");
        });
    }
});

$(window).bind("resize", function(){
    var containerSize  = $(".content").width(),
        bodyFontSize = $(".content").css("font-size");
        textPercentage = parseInt(bodyFontSize.substring(0, bodyFontSize.length - 2)) / 1000,
        textRatio      = containerSize * textPercentage,
        textEms        = textRatio / parseInt(bodyFontSize.substring(0, bodyFontSize.length - 2));
        if (!isMobile)
            textEms = (textEms - 0.2);
    $('.content').css('fontSize', textEms+'em');

    var wScreen = isMobile ? $(window).width() : $("div.content").width();              
    var per = .92 * wScreen;
    if (!isMobile)
    {
        if ($(window).scrollTop() > $("#header_image").outerHeight())
        per = .92 * $(window).width();

        sMenu.toggleClass('sticky', $(window).scrollTop() > $("#header_image").outerHeight());
        $(".menu").children("li").resizelis(per);
    }

    // more code folows....
}).trigger("resize");

我基本上只是在所有页面中将所有内容都更改为$(".content")而不是$(window)。在IE 8及以下版本的所有浏览器中都可以正常工作。但奇怪的是，在我这样做之前，链接很好，你可以在实际的会议网站上看到：http://opportunityfinance.net/conference-2013/index.html

可能导致此问题的原因是什么？我对链接没有任何悬停jQuery效果，看起来这可能是CSS的问题吗？

如果不是40％的IE用户来到网站，运行IE 8，我真的不在乎，但我别无选择支持它！ arggg！ IE也是这个网站上最流行的浏览器... arggg！

Answer 1

我相信我发现我的问题的解决方案看起来很奇怪。因为font-size被设置为：0.8em（整体正文字体大小），并且字体类型是GOTHIC。答案就在这里：IE8 font-size toggles on :hover - Japanese lang only

UNBELIEVABLE！

IE 8浏览器中的$（window）.scrollTop导致链接问题，如何修复？

1 个答案: