0

FancyBox (2.0.5) ページは、すべてのブラウザーで美しく表示されますが、Windows 用の IE と FF があります。新鮮な目が必要なのかもしれません。

これが私のコードです：

$('.fancybox').fancybox({
 'type': 'iframe', 
 'width': 800, 
 'height': 580
});

ご覧のとおり、かなり基本的なものです。私はヘルパーを使用しておらず、デフォルトの CSS を変更していません。

すべての Mac ブラウザーと PC の Chrome では、次のようになります。

ここに画像の説明を入力

これはまさに私が得るべきものです (スクロールバーなしでもできますが)。

IE 7 & 8 (9 は試していません) と FF for Windows では、次のようになります。

ここに画像の説明を入力

フレームなし、背景なし、閉じるボタンなし。また、閉じることはできません。リフレッシュする必要があります。

私がここに欠けているものはありますか？

ここにリンクがあります: http://www.downtownmuncie.org/business/search2/arts/小さい地図の下にある「ズーム マップ」リンクをクリックします。

4

1 に答える 1

4

fancyboxを機能させたい場合（そしておそらく他のものも）、Webサイトで修正する必要のあることがたくさんあります。

まず、153行目と154行目：実際に1つのインスタンスが必要なときに、2つのfancyboxのインスタンスを読み込んでいます

<script src="http://www.downtownmuncie.org/s/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<script src="http://www.downtownmuncie.org/s/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>

それらのいずれかを選択しますが、両方は選択しません。

第二に、あなたの問題の本当の問題は行155です

<link href="http://www.downtownmuncie.org/s/fancybox/jquery.fancybox.css" type="text/javascript" type="text/css" rel="stylesheet" >

fancybox cssファイルをロードできないため、表示がおかしくなることに注意してください（コピーアンドペーストは非常に危険です）。その行から削除type="text/javascript"し、ドキュメントのセクションに移動することもお勧めします。type="text/css"type="text/javascript"<head>

3番目に、行番号4と余分な二重引用符 "を使用しているため、ドキュメントには文字エンコード情報がありません。この部分は次のとおりです。

content="text/html; charset="utf-8"

する必要があります

content="text/html; charset=utf-8"

違いが見つかれば（ヒント：すべてがcontent値になります）

4番目で最後の158行目

<script type="text/javascript">
$('a.fancybox').fancybox({
 'type': 'iframe', 
 'width': 800, 
 'height': 580
});
</script>

.ready()次のようなメソッド内でスクリプトをラップします

<script type="text/javascript">
$(document).ready(function(){
 $('a.fancybox').fancybox({
  'type': 'iframe', 
  'width': 800,
  'height': 580
 });
});
</script>

それはhttp://fancyapps.com/fancybox/#instructionsによって文書化されています

また、バリデーターを使用して、HTMLコーディングの小さなバグをすべてチェックして修正することをお勧めします。

于 2012-07-22T06:45:01.737 に答える