0

好的，我已将其范围缩小到某种问题$(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 （忽略该页面上滑块的外观，这完全是另一回事）。您可以浏览菜单中的任何页面，以查看微型站点所有页面中的相同问题。

您会看到，每次您转到任何菜单项并将鼠标悬停在任何链接上时，页面本身都会出现故障并导致它有点晃动。如何解决这个问题？这些页面在 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，我真的不会在意，但我没有选择支持它！阿格！IE 也是这个网站上最流行的浏览器... arggg！

4

1 回答 1

0

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

难以置信的！

于 2013-09-11T19:42:48.153 回答