ホーム > Web制作 > display:noneにしている要素内にGoogle Map(iframe埋め込み)があるとIEではマップを表示しない件について

display:noneにしている要素内にGoogle Map(iframe埋め込み)があるとIEではマップを表示しない件について

今日はわりとハマっちゃった(1時間くらい費やしてしまった)ことがあって今この時間(20:55)のワタクシは若干心が慌ただしいので、ブログの更新内容もそれで( ー`дー´)キリッ

ほんとはもっとちゃんと細かく掘って原因究明して自分のそっち向けブログの記事にしようかと思ったけど、今日だとその気力もないので、まさに備忘録がてらひたすらメモ書きの体で。

同一ページ内でタブ展開する複数の要素があって、これは最初にこのページにブラウザアクセスした際に表示しているものとそうでないものがあるわけですが、この「表示されている・非表示になっている」ものをCSSプロパティのdisplay(noneとblock)で表現。

Firstタブ:display:block
Secondタブ:display:none
Thirdタブ:display:none

これをデフォルトの状態で設定しておいて、jQueryでタブの切り替え(タブメニュー部分のクリック)でもってその内容を表示、非表示(jQueryのcssメソッドでdisplayの属性値を変更)してたんですが、これだと初期設定でdisplay:noneにしているタブ内容にあるGoogle Mapがなぜか表示されないんですね。

おりょりょとなって該当のCSS部分(display:noneの部分)を無効化したら普通に表示しました。

なんで、原因はこれなんでしょうが、はたしてGoogle Mapを読み込んでいる内容との間に問題があるのか、それともjQueryでのcssメソッドの書き換えあたりでなんかおかしなことになっているのかとか、余裕があったらもっと掘りたかったんですが、そんな余裕は週末まで全然ないので、とりあえず要素の表示、非表示を制御できる他のプロパティを試して、結局visibility属性でもって対応することに。これだと大丈夫でした。(displayのnoneとvisibilityのhiddenでは結果が異なるのですが、とりあえず表示・非表示というところに対応するってところで妥協)

ただ、これだとマップは表示するんですが、なんか位置がズレるんですね。予想もしないほうへ。

これも原因をしっかり掘って今後に活かしたいのですが、今日はそれはあきらめて、ちょっとトリッキーというかスマートじゃないやり方なんですが、positionでもってここをクリアー。これでとりあえず金曜までに仕上げないといけない案件の目処がたってきたのでほっと胸をなでおろし〜、です。

イレギュラーに何箇所か対応して、こういった「むむむ」という自分的には最善じゃない処理もしちゃうことありますが、スケジュールから逆算して、可能な限りで納品、成果物のクオリティをぎりぎりまで高めるっていうことも、ただ「ベスト」を目指す、心がけるだけでなくて大事なことだと思ってます。間に合わなかったら意味ないので。(それはjust a 趣味さ!)

お疲れ様です( ´ー`)y-~~


ホーム > Web制作 > display:noneにしている要素内にGoogle Map(iframe埋め込み)があるとIEではマップを表示しない件について

検索

ページの上部に戻る