新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

Internet Explorer 7にGoogle maps APIのバグ?

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

Google Maps APIを使うときはHTMLをユニコードで書かなければならない。
ところが、FireFoxでは何ら問題ないのだが、Internet Explorerでユニコードを使うといろいろ問題が発生する。
そこで、ShiftJISで書いたHTML内にインラインフレームを配置して、そこにユニコードで書いたGoogle Maps APIを書いたHTMLをリンクさせる。
ところが、FireFoxやIE6ではしっかり表示されているGoogleMapがIE7でだけ表示されないというトラブルが発生した。

スポンサーリンク
 

とりあえず、親HTMLをユニコードにしてみる。ところがこれだとIE6で表示されない。
そこでネットで検索して調べてみると。
インラインフレームの中身が表示されない – XREA&CORE SUPPORT BOARD

原因は特定されていなかったように思います・・・
IFRAMEで呼び出される側のソースの方の問題だとは思いますが・・・
以前スタイルシートを使っていないもので
<META http-equiv=”Content-Style-Type” content=”text/css”>
↑コレを宣言していたらダメだったというケースがあったように思いますが・・・
メタタグをとったらうまくいったというのがあったような気がします
いろいろ修正していたら、そのうちに直ったとか・・・

なんていう記事を見つけた。
そこで、呼び出される側のHTML内のMETAタグまわりをいろいろ調べてみるとなんとか解決。

□表示されなかったコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>すったもんだのインラインフレーム</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="cssjs/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps?file=api&v=2&key=xxxxx"
type="text/javascript"></script>
</head>

□表示されたコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>すったもんだのインラインフレーム</title>
<link href="cssjs/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps?file=api&v=2&key=xxxx"
type="text/javascript"></script>
</head>

よく見てみると文字コードを宣言しているMETAタグがTITLEタグの後にあったときに表示されていないことがわかる。
つまり、回避策はなるべく文字コードを宣言するためのMETAタグは上のほうに置くということ。
できれば最上位(先頭)に置いたほうがいいと思う。
ついでにいろいろ調べてみるとやはり文字コードを指定するMETAタグはヘッダーの一番先頭に配置するのがいいらしい。
少なくともtitleタグよりは前に配置しましょう。
文字コード宣言は行いましょう(HTML) – Web標準普及プロジェクト
HTMLタグ/ページ全般タグ/文字コードの指定 – TAG index

しかし、どんな設定でもしっかり表示されたFireFoxはやっぱりすごいです。

 - プログラミング, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

no image
リンクポピュラリティとアンカーコンテキストマッチ

1年以上前の記事です。内容が古い可能性があります。SEOでよく、リンクポピュラリ …

受信はできてもメールが送信できない時にチェックすべき2つの項目

1年以上前の記事です。内容が古い可能性があります。最近のメールアドレスはセキュリ …

ネットバンク(ネット銀行)はどこがいい?

1年以上前の記事です。内容が古い可能性があります。僕の場合、実はアフィリエイトや …

Facebook(フェイスブック)で誰に友達申請(リクエスト)を送ったか確認する方法【Unfriend Finder】

1年以上前の記事です。内容が古い可能性があります。以前、Facebookで友達リ …

NHK受信料は払うな。裁判でテレビがあっても契約書がなければ支払う必要はないとの結果

1年以上前の記事です。内容が古い可能性があります。テレビネタをもう一つ。 今度は …

SNS(ソーシャルネットワーク)を使用する上で注意をすべきたった2つのポイント

1年以上前の記事です。内容が古い可能性があります。スマホの情報漏洩は免れない旨、 …

Tumblr(タンブラー)を勉強してみた (11/11追記)

1年以上前の記事です。内容が古い可能性があります。謎多きTumblr(タンブラー …

livedoor Blog(ライブドアブログ)のスマートフォン(スマホ)対応レイアウトで広告収入を得る方法

1年以上前の記事です。内容が古い可能性があります。時代はスマホですね。 当ブログ …

YouTubeの再生リスト追加でツイッター大爆発!!

1年以上前の記事です。内容が古い可能性があります。いやぁ。大変失礼いたしました。 …

「開く」ダイアログボックスからデスクトップが消えた!復活させる(元に戻す)方法

1年以上前の記事です。内容が古い可能性があります。「開く」ダイアログボックスや「 …

血液型オヤジ