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はやっぱりすごいです。
アドセンス広告メイン
関連記事
-
-
Flicksquareの設定を復活させる方法(foursquare→Flickr連携)
1年以上前の記事です。内容が古い可能性があります。Flicksquareの設定が …
-
-
長距離高速深夜バス(夜行バス)に電源が付いているかどうかは座席の列数で判断。3列は付いている可能性大
1年以上前の記事です。内容が古い可能性があります。京都に来ています。
-
-
僕が感じた緊急地震速報の媒体に寄る速さ比較
1年以上前の記事です。内容が古い可能性があります。このところ、緊急地震速報を聞か …
-
-
「Xperia AX」に機種変したのでモバイルSuicaで定期券を買ってみた(Suica購入編)
1年以上前の記事です。内容が古い可能性があります。モバイルSuica入会編の続き …
-
-
仮サーバーがインデックスされている
1年以上前の記事です。内容が古い可能性があります。会社のサーバーの一部を仮サーバ …
-
-
最近のメール設定は複雑(チェックしておくべき3つのポイント)
1年以上前の記事です。内容が古い可能性があります。コンピュータの世界ではセキュリ …
-
-
「Xperia AX」でカメラ起動時の強制シャッターを止める方法
1年以上前の記事です。内容が古い可能性があります。色々と問題もあった「Xperi …
-
-
iPhoneで自分のメールアドレスを確認する方法
1年以上前の記事です。内容が古い可能性があります。MMS、Eメール(i)、通常の …
-
-
「子宮頸がんワクチン」は一先ず打たないほうがいい。副作用の原因は脳障害?
1年以上前の記事です。内容が古い可能性があります。うちの娘も見送らせてもらってま …
-
-
アンカー付きオブジェクトへのテキストの回り込みができない【InDesign】
1年以上前の記事です。内容が古い可能性があります。久しぶりにInDesign(イ …
- PREV
- 現場がお金のことを意識するようになってきた
- NEXT
- ドコモがホワイトリストからブラックリストへ