HTML5 doctype とタグを使用してサイトを構築しました。いくつかのブラウザー テストを行っていたところ、一部が 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 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();
});