- ベストアンサー
IE9環境とIE11環境でのHTMLコードの挙動の違いと解決方法
- IE9環境とIE11環境でのHTMLコードの挙動の違いと解決方法についてまとめました。
- Windows7,IE11環境でのHTMLコードの挙動に問題があり、上記のシナリオが正しく動作しないことがわかりました。
- Windows7,IE11環境でも正常に動作するようにするためには、コードの修正が必要です。
- ホームページ作成ソフト
- 回答数2
- ありがとう数13
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞には、インライン要素はbodyの中に書く、と逆のことを言っているように思えますが・・・ いいえ、 「<body>～</body>の中で使用される要素の多くは、 ブロックレベル要素（Block-Level Elements）か、インライン要素（Inline Elements）に分類されます。」 「インライン要素（Inline Elements） インライン要素は、主にブロックレベル要素の内容として用いられる要素で、・・・インライン要素には、以下のものがあります。 ・・・・img」 もっと直接的に分かるのは仕様書 <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.1 意味は BODY要素は、 O O (%block;|SCRIPT)+ +(INS|DEL) 開始タグ、終了タグとも省略可能 0 0 ブロック要素または(|)script要素が一つ異常 + block要素しか置けない INSとDELも置ける。 IEの解釈がどうか知りませんが、BODY直下にIMG要素があると、それはブロック要素の内部にあるべき物なので、匿名のボックスを作ってしまいます。HTML5では、そのような場合はどのようにDOMを組み上げるかは規定されていますが、それ以前のHTMLはブラウザの解釈に任されてきました。 単にそれだけ、ブラウザ間の誤差はそれだけではなく、実に様々な場面で作者の頭を悩ませることになります。そのために、標準モードを意識しておかないと困るのです。HTML5では標準モードしかない。というか<!doctype html>は、単にすべてのブラウザに標準モードだよと宣言する意味しかなくなる。 泣こうがわめこうが、いずれHTML5の時代になります。そのためにも、strict--で記述し、標準モードで動作するようHTMLを書くしかない・・・と機械的に覚えてください。私のサンプルHTMLをご覧になると分かるようにシンプルで分かりやすくメンテナンスも容易だと思います。組織で利用するものでしたら、将来は他人がメンテナンスしなければならなくなるかもしれません。HTMLは文書構造だけ、プレゼンテーションはスタイルシートに一任されると、楽になりますよ。 あなたのHTML/javascriptがうまく動作しない理由は調べていません。申し訳ないが、必要を感じなかったからです。 あなたの質問への直接の回答にならなくて申し訳ありませんでした。
お礼
早速のご回答ありがとうございます。 「直下」の意味を十分理解していなかったようです。 >そのためにも、strict--で記述し、標準モードで動作するようHTMLを書くしかない・・・と機械的に覚えてください。 ↑ 仰せの趣旨は重々承知しています。 が、10年以上前に習得した"自由奔放"なコーディングスタイルから抜け出す気力・能力がないもんで・・・。
お礼
早速のご回答ありがとうございます。 貴コードを参考にしてアレンジしながら試行錯誤を繰り返し、やっと希望するものが実現できました。 >などでチェックはされていますか？？ ↑ 小組織内で閲覧するページで、私自身プロを目指しているわけでもないので、正規スタイルからは、ほど遠いスタイルになっていることと思います。 ><body>にはインライン要素は直接置けません。 そのため匿名ボックスが作られてしまいます。 ↑ 初心者の私には、このような事柄に対する知識はありません。 ただ、質問で記述しましたfunction highやfunction lowとかいうスクリプトがIE11ではなぜ作用しないのかが不思議です。
補足
<body>にはインライン要素は直接置けません。 ↑ http://www.htmq.com/htmlkihon/005.shtml には、インライン要素はbodyの中に書く、と逆のことを言っているように思えますが・・・（body以外にも書けるのかも知れませんが）。或いは、古い昔の記事なんでしょうかねぇ。 それはそれとして、私のコードの<body>の部分で、例えばどのコード部分が「直接置いてはいけないインライン要素」なのでしょうか。上記URLの記事からすると、『<img・・・をbodyに記述してはダメ』、ということでしょうか？。 それと、『bodyにインライン要素を直接置いた』のが原因で『私のコードではフェードイン・アウトしない』という理解でよいでしょうか。