重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

IE9環境とIE11環境でのHTMLコード

解決済

  • 質問者：gihun
  • 質問日時：
  • 回答数：2件

添付画像の×部分は、本当は画像です。画像が存在しないので×印になっているのですが、以下に記述する質問内容には、画像の有無は無関係です。

添付画像は、Vista-SP2,IE9の画面の一部分です。ISPの自分のエリアにアップしたページを見ています。
上の画像は「Pic1.jpg」、下の画像は「Pic3.jpg」です。
で、実は両画像の間に「Pic2.jpg」が隠れているのです。
HTMLファイルに記述したコードは後段のとおりです。

HTMLファイルの概要は次のとおりです。
(1)Pic1の上をマウスが通過した後、Pic2の上（Pic1とPic3の中間あたり）にマウスを置くとPic2が徐々に鮮明さを増しながら表示される（フェードイン）。
(2)Pic2からマウスを外すと消え（フェードアウト）、再度マウスを載せると表示される。
(3)但し、一旦Pic3の上にマウスを載せると、(1)を実行しない限りPic2は表示されない。
（いずれもクリックは不要です。マウスポインタを通過させるだけです）

そこで質問なんですが、上記シナリオは、Vista,IE9まではうまくいきました。
しかし、Windows7,IE11環境ではうまくいかないのです。Pic1にマウスを置いただけでPic2が表示されてしまうのです。しかも直ちに鮮明に。

Windows7,IE11環境でもうまくいくようにするには、どうすればよいのでしょうか。

（コード）
<html>
<head>
<SCRIPT language=JavaScript1.2>
<!--
function high(which2)
{theobject=which2
highlighting=setInterval("highlightit(theobject)",01)
}function low(which2)
{clearInterval(highlighting)
which2.filters.alpha.opacity=01
}function highlightit(cur2)
{if(cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=01
else if(window.highlighting)
clearInterval(highlighting)
}
//-->
</SCRIPT>
</head>
<body>
<img onmouseover=cnt.style.visibility="visible" onmouseout=cnt.style.visibility="visible" src="pic1.jpg">
<div id=cnt style="visibility:hidden;">
<IMG onmouseover=high(this) style="FILTER: alpha(opacity=01)" onmouseout=low(this) SRC="pic2.jpg">
</div>
<div>
<img onmouseover=cnt.style.visibility="hidden" onmouseout=cnt.style.visibility="hidden" src="pic3.jpg">
</div>
</body>
</html>

「IE9環境とIE11環境でのHTMLコー」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

まずHTML間違ってます。



Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　などでチェックはされていますか？？
<body>にはインライン要素は直接置けません。
　そのため匿名ボックスが作られてしまいます。

[例] 例えばその部分がナビゲーションだとして
<div class="header">
　<div class="nav">
　　<ol>
　　　<li><a href=""></a></li>
　　　<li><a href=""></a></li>
　　　<li><a href=""></a></li>
　　</ol>
　</div>
</div>
　とマークアップされているとします。それぞれを配置した後、CSS3のtrabsformを使うのが楽でしょう。

[サンプル]
★HTML Lintで確認済みのHTML4.01strict + CSS2.1
★タブは＿に置換してあるので戻す。
★詳しい説明はソース内に書いてある。
★携帯電話や印刷時、携帯電話には適用されない(確認)のでseo的にもOK
　JAVASCRIPT無効の場合も適用される。
★スタイルシートを書き直すだけでどのようにもデザインは変更できます。
★画像は120px×60pxを想定しています。ソース参照

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}

/* ここから時間的変化のスタイルシート */
div.header div.nav ol{
list-style:none; /* リストじゃないよ */
}
div.header div.nav ol li{
width:120px;height:60px;/* サイズ */
position:relative;/* 以降の位置やサイズの基準 */
margin-top:5px;
text-align:center;/* 文字を隠すならこれは書かない */
line-height:60px;/* 縦中央に!文字を隠すなら書かなくて良い */
}
div.header div.nav ol li a{
display:block;/* 行内要素→ブロック要素 */
width:100%;height:100%;/* staticでない親要素、ここではli */
}
div.header div.nav ol li a[href="/Books"]{/* リンク先Booksのa要素 */
opacity:0;/* 透明だよ */
transition-property: opacity;/* 変化させるプロパティ */
transition-duration:1s; /* 変化に要する時間 */
transition-timing-function:ease-in-out;/* 変化の仕方ゆっくり始まりゆっくり終わる */
}
div.header div.nav ol li a[href="/Books"]:hover{
opacity:1;/* hover時のopacityの値 */
}
/* 背景画像など */
div.header div.nav ol li a[href="/"]{
background-image:url(Pic1.jpg)
}
div.header div.nav ol li a[href="/Books"]{
background-image:url(Pic2.jpg)
}
div.header div.nav ol li a[href="/Profile"]{
background-image:url(Pic3.jpg)
}
div.header div.nav ol li{
background-color:silver;/* 分かりやすいようにliに色を付けておく */
}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="/">トップ</a></li>
＿＿＿＿<li><a href="/Books">書籍</a></li>
＿＿＿＿<li><a href="/Profile">プロフィール</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>

この回答への補足

<body>にはインライン要素は直接置けません。
↑
http://www.htmq.com/htmlkihon/005.shtml
には、インライン要素はbodyの中に書く、と逆のことを言っているように思えますが・・・（body以外にも書けるのかも知れませんが）。或いは、古い昔の記事なんでしょうかねぇ。

それはそれとして、私のコードの<body>の部分で、例えばどのコード部分が「直接置いてはいけないインライン要素」なのでしょうか。上記URLの記事からすると、『<img・・・をbodyに記述してはダメ』、ということでしょうか？。

それと、『bodyにインライン要素を直接置いた』のが原因で『私のコードではフェードイン・アウトしない』という理解でよいでしょうか。

補足日時：2014/08/25 18:06
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速のご回答ありがとうございます。
貴コードを参考にしてアレンジしながら試行錯誤を繰り返し、やっと希望するものが実現できました。

>などでチェックはされていますか？？
↑
小組織内で閲覧するページで、私自身プロを目指しているわけでもないので、正規スタイルからは、ほど遠いスタイルになっていることと思います。

><body>にはインライン要素は直接置けません。
　そのため匿名ボックスが作られてしまいます。
↑
初心者の私には、このような事柄に対する知識はありません。
ただ、質問で記述しましたfunction highやfunction lowとかいうスクリプトがIE11ではなぜ作用しないのかが不思議です。

通報する
お礼日時：2014/08/21 15:53

No.2

  • 回答者： ORUKA1951
  • 回答日時：

＞には、インライン要素は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-html401 …
意味は
　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がうまく動作しない理由は調べていません。申し訳ないが、必要を感じなかったからです。
　あなたの質問への直接の回答にならなくて申し訳ありませんでした。
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速のご回答ありがとうございます。

「直下」の意味を十分理解していなかったようです。

>そのためにも、strict--で記述し、標準モードで動作するようHTMLを書くしかない・・・と機械的に覚えてください。
↑
仰せの趣旨は重々承知しています。
が、10年以上前に習得した"自由奔放"なコーディングスタイルから抜け出す気力・能力がないもんで・・・。

通報する
お礼日時：2014/08/25 21:21

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報