忍者ブログ
自分なりの目線で情報を発信します。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

jQuery Tools というjQueryライブラリを使うと、
オーバーレイ機能が簡単に実装できる・・・はずだったのですが、
Internet Explorer の場合にだけ、オーバーレイ表示させたい領域が
オーバーレイ表示できない現象に遭遇しました。
 
IEの場合はどうもCSSが一部適用されていないようで、
HTMLとCSSの文字コード違いを疑ったのですが、UTF-8で同じだし。。。
 
もーよくわからん!と途方にくれつつさらに調べると、
ケアレスミスで、DOCTYPEがheadタグの中に紛れていただけでした。
overlay以外のjqueryツールは普通に動くし、IE以外のブラウザではオーバーレイ表示されるので、
かなりの時間迷ってしまったが、結局DOCTYPEを1行目に直すだけだった。アホだ。。。
IEって、変に厳しいな^^;

HTML文法はとっても大事、ということですねー。
 
■修正前
  1. <html>
  2. <head>
  3.   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
  5.   <meta http-equiv="Content-Language" content="ja-JP" >
  6.   <script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
  7.   <script type="text/javascript" src="/js/jquery.tools-1.2.5.min.js"></script>
  8.   <title>デモ画面</title>
  9. </head>
  10. <body>
 
■修正後
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
  5.   <meta http-equiv="Content-Language" content="ja-JP" >
  6.   <script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
  7.   <script type="text/javascript" src="/js/jquery.tools-1.2.5.min.js"></script>
  8.   <title>デモ画面</title>
  9. </head>
  10. <body>
 
 
ちなみにjQuery Tools Overlayはここからダウンロードできます。
 
Overlayの動作デモはこちら。
 
日本語ではこちらのサイトがとても分かりやすく、
丁寧に説明してくださっています。
 
PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
お知らせ
プロフィール
HN:
shusatoo
性別:
男性
自己紹介:
基本PHP。JavaScriptちょっとだけ。Javaをほんの少し。
おすすめ本
最新コメント
[10/09 shusatoo]
[10/09 misney]
最新トラックバック
カレンダー
09 2017/10 11
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
ブログ内検索
カウンター
アク解アナライズ
バーコード
ビジター

Copyright © [ 開発メモるアル ] All rights reserved.
Special Template : 忍者ブログ de テンプレート
Special Thanks : 忍者ブログ
Commercial message : [PR]