1

HTML5 doctype とタグを使用してサイトを構築しました。いくつかのブラウザー テストを行っていたところ、一部が Firefox 3.6 (および FF 3.0.5 ですが、3.6 までしかサポートしていません) で動作しないことがわかりました。ヘッダー タグ内のすべてがまったく表示されません。なし。Firebug もエラーを表示しません。

奇妙なことは、ヘッダー内にあるアイテムだけが機能しないことです。sectionarticlenav、およびfooterタグのすべてが完全に機能し、正しくスタイル設定されています。私はnormalize.cssを使用しています。このhtml5 shivを使用して、IE6でサイトを正常に動作させることさえできます。

私のヘッダータグが他と一線を画しているのは、ヘッダー タグ内でいくつかの基本的な jQuery フェードが発生していることです。css visibility:hiddenを使用して div を非表示にしているため、レイアウトは変更されません。私のJSコードは以下に掲載されています。この手法(fadeIn 1) を使用して、レイアウトを維持しながら要素をフェードインしています。

また、Firefox 3.6 html5 パーサー(FF 3.6 ではデフォルトでオフになっているようです)をオンにすると、すべて正常に動作することにも注意してください。しかし、前に述べたように、html5 パーサーをオフにしても、jQuery の影響を受けない html5 タグは問題なく解析されます。エンド ユーザーの構成を変更できないため、これを回避する必要があります。

ヘッダー タグ内にあるのは、div、h1、h2、h3、p、およびアンカー リンクだけです。hgroup やその他の 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