1

我使用 HTML5 文档类型和标签构建了一个站点。我正在做一些浏览器测试，我发现其中一部分在 Firefox 3.6（和 FF 3.0.5，但我们只支持回到 3.6）中不起作用。我的标题标签中的所有内容都没有显示。没有什么。Firebug 也不显示错误。

奇怪的是，只有标题中的项目不起作用。我的section、article、nav和footer标签中的所有内容都可以完美运行并且样式正确。我正在使用normalize.css。我什至使用这个 html5 shiv 让我的网站在 IE6 中运行良好。

我的标头标签与其他标签的不同之处在于其中发生了一些基本的 jQuery 淡入淡出。我正在使用 css visibility:hidden隐藏 div，因此我的布局不会改变。我的 JS 代码发布在下面。我正在使用这种技术（fadeIn 之一）在保持布局的同时淡入我的元素。

我还想指出，当我打开 Firefox 3.6 html5 解析器（在 FF 3.6 中默认情况下显然是关闭的）时，一切正常。但正如我之前所说，即使关闭了 html5 解析器，不受 jQuery 影响的 html5 标签也被解析得很好。由于我无法更改最终用户配置，因此我必须解决此问题。

我的标题标签中只有 div、h1、h2、h3、p 和锚链接。没有任何 hgroups 或其他 html5 标签。只是标题标签就是它。

我已经搜索并尝试了许多不同的东西，但没有任何效果。

我的js代码：

var mySite = {
_delay : 2000,
init : function () {
    this._frame1();
    this.nextButton();
},
nextButton : function () { 
    var that = this;
    $('.next-button').click(function (e, a) {
        e.preventDefault();
        if (typeof a !== 'undefined' && a === 'auto') {
            that._frame2(a);
        } else {
            clearTimeout(that.timer);
            that._frame2('clicked');
        }
    });     
},
_frame1 : function () { 
    var first = function () { 
        $('#drug-info-1, .specific-info-small').hide().css({visibility: "visible"}).fadeIn();
    };
    var second = function () {
        $('#drug-info-2').hide().css({visibility: "visible"}).fadeIn();
    };
    var third = function () {
        $('#drug-info-3, .next-button').hide().css({visibility: "visible"}).fadeIn();
    };

    setTimeout( first, this._delay);
    setTimeout( second, this._delay*2);
    setTimeout( third, this._delay*3);      
    this.timer = setTimeout( function () { $('.next-button').trigger('click', ['auto']); }, this._delay * 7);
},
_frame2 : function (a) {

    bye1 = function () {
        // fade out all of frame1 and then fadein first part of headline of frame2
        $('.frame1').fadeOut('slow' ,function () {
            $('.frame2').show();
            $('.frame2 h2, #headline-source').hide().css({visibility: "visible"}).fadeIn();
        });                         
    };
    fourth = function () {
        $('#clinical-studies').hide().css({visibility: "visible"}).fadeIn();
    };

    fifth = function () {
        $('.learn-more-button, .important-safety').hide().css({visibility: "visible"}).fadeIn();
    };

    if (typeof a !== 'undefined' && a === 'auto') {
        setTimeout( bye1, this._delay * 2);
    } else {
        bye1();
    }       
    setTimeout( fourth, this._delay * 3);
    setTimeout( fifth, this._delay * 4);
}
};
$(document).ready(function () {
     mySite.init();                             
});
4

0 回答 0