• 締切済み

IE11での互換表示の挙動

IE11で下記コードのものをアップし表示させたのが添付画像の左側のものです。思惑通りの表示です。 一方、ツールの互換表示設定で、当該サイトを追加した後に表示されたのが右側の画像です。ここには、予期しない1行が下に余分に付いています(黄色部分)。 下記コードはコード冒頭に記述したOPTYPE(HTML4.01)に適合していることはチェック済みです。 添付画像の右側の画像のような表示になるのは何故でしょうか。最新の文法に基づき記述したコードが何故曲解されて崩れる(本例では1行余分に表示される)のでしょうか。そも、この場合における「互換表示設定」って、一体私がどういう設定を命じたのでしょうか。 簡潔で結構ですので、カラクリを教えていただけたら幸いです。 (注)コードは、本件質問の本質に関わらない要素等は記述を省略してあります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> </head> <body style="background-color:gray"> <div style="background-color:yellow;width:150px;"> <form action="#"> <SELECT size=4 style="width:100%;"> <OPTION value="" selected>test1</option> <OPTION value="">test2</option> <OPTION value="">test3</option> <OPTION value="">test4</option> <OPTION value="">test5</option> </SELECT> </form> </div> <p>ここはformの外です</p> </body> </html>

noname#201411
noname#201411

みんなの回答

  • drum_KT
  • ベストアンサー率43% (1108/2554)
回答No.1

IEの「互換表示」というのは、HTMLが古いIE(例えばIE7)の独自タグに準拠しているような場合に、古いIEのレンダリング処理と互換性のある表示を行うという意味です。 なので、新規に作成するページを、わざわざ互換表示設定で確認する必要はあまりありません。しいて言えば、古いIEで見るとどうなるかを確認しているということになります。

noname#201411
質問者

お礼

早速のご回答ありがとうございます。 >しいて言えば、古いIEで見るとどうなるかを確認しているということになります。 ↑ だとすると、ちょっと昔にタイムスリップして、古いIEの時代に、添付画像の左側の画像のような正規の表示をさせるには、何か別の古いコードで記述していたはずだ、ということになるのでしょうか?。 「互換表示設定」というのは、もし古いコードで書かれていればそれに合わせた時代のIEに衣替えし(そのかわり、その古いIE以降のバージョンに対応した新しいコード部分については無視される)、他方、すべてがIE11に適合するコードで書かれていれば、何もしない、つまり、「互換表示設定」をしても何もせず左側の画像のように表示される、というのであれば納得・理解しやすいのですが・・・。 それとも、「互換表示設定」というのは、コードの新旧がどうであれ、古いIEに自動的にバージョンダウンして表示するということでしょうか。ただその場合、古いIEというのはどのバージョンなのか判然としませんが・・・。IE11の場合はIE9ということでもなさそうだし。或いは、コード冒頭に記述したDOCMODEより古いHTML3.0?とかに合わせたバージョンにダウンして表示する、とか?。 それにしても、本件サンプルコードは、古い昔からあるようなコードで、ことさら新しい記述が含まれているとも思えません(素人の勝手な想像ですが)。

関連するQ&A

  • IE7で○の記号が小さく表示されてしまいます

    IE7で○の記号が小さく表示されてしまいます。 調べたところ、IE7のバグで文字コードにutf-8を使用してフォント指定をしない場合に起きるようです。 以下のサイトを見てコードを修正したのですが、○のサイズは小さいままでした。 http://blog.btmup.com/web-general/ie7-symbol-small.html こちらのサイトの文字コードはutf-8ですが、○は正常なサイズで表示されます。 http://okwave.jp/qa/q4611331.html 何が悪いのでしょうか? どなたかご指摘をお願いします。 /**** ソースコード ****/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <style type="text/css"> body { font-family: Osaka,"MS Pゴシック","MS PGothic",Sans-Serif; } </style> <body> <p>test</p> <select> <option value="1">○</option> <option value="2">●</option> <option value="3">△</option> <option value="4">◎</option> </select> </body> </html>

  • IEでエラー

    FireFoxだと問題ないのですが、IEだとエラーが出ます。 原因がわからないので、助けてください。 IEには次のようなエラーが出ます。 ライン:5 文字:1 エラー:構文エラーです コード:0 ソースコードは以下の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> 。。。。 以上、すみませんが、よろしくお願いします。

    • ベストアンサー
    • HTML
  • SafariでPHPソースがそのまま表示される

    Safariでindex.phpを開くとソースコードがそのまま表示されてしまいます。 拡張子をphpとしているだけでソース内にはphpスクリプトは記述しておりません。 なぜでしょうか? ※ファイル名をindex.htmlに変えると正しく表示されます。 Windows 7 Home Premium 64bit Safari5.1.5 ソースコードのエンコーディング:utf-8 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>テストtitle> </head> <body> <h1>テストページ</h1> </body> </html>

  • euc-jpのページをIE7で表示したら真っ白に表示される

    PHPでHTMLを吐き出すeuc-jpのページをIE7で表示したら真っ白になってしまう ページがあるのですが、エンコードを日本語選択にしたり画面を更新(F5) したりすれば通常表示されることから、 IE7 で画面が真っ白になるページの対処方法 http://www.drk7.jp/MT/archives/001163.html と同じ症例ではないかと断定したのですが、↑などを参考に 下記のようにしてみましたが、改善ありません。その他、特効薬はありますか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML LANG="ja"> <HEAD> <!-- 雀の往来京 --> <meta name="content-language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript">

    • ベストアンサー
    • HTML
  • 変数を渡して新しいウィンドウで表示させるには

    http://iskiso3.hustle.ne.jp/i.php 上のページのように最初のページで入力してもらった変数を次のページにPOSTで渡すことは出来るのですがこのときに新たなウィンドウで結果を表示させるにはどのようにスクリプトを書き換えたらよいのでしょうか? JAVAを使えば出来るということまではわかり試行錯誤してみたのですが変数が渡されなかったり問題がおきてしまいました。 一応上記のページのスクリプトは 最初のページが ------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=EUC-JP"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> </head> <body> <form action="o.php" method="post"> メッセージを入力してください。<br> <input type="text" name="mes" size="30"> <input type="submit" value="送信"> </form> </body> </html> ------------------------------------- で、2番目のページが ------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=EUC-JP"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> </head> <body> <?php $mes = $_POST['mes']; echo "$mes"; ?> </body> </html> ------------------------------------- というようになっています。 ご教授よろしくお願いいたします。

    • ベストアンサー
    • Java
  • 初歩的な質問で恐縮ですが、教えてください。

    すみませんが、教えてください。 入力フォームでデータが送れなくて、困っています。 下のコードに問題点はあるのでしょうか? 自分では、分からないので、よろしくお願いいたします。 test1.php------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <form method="post" enctype="multipart/form-data" action="./test2.php"> <input type="text" name="fmTitle" ><br /> <input type="submit" value="次へ" > </form> </body> test2.php-------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <?= $fmTitle . "<br />" ?> </body>

    • ベストアンサー
    • PHP
  • フレームページに文字が表示されなくて困ってます><

    フレームページに文字が表示されなくて困ってます>< フレームページは表示されるのですがmenu.html.htmlやcontents.html.htmlに書いた文字が表示されません どこが間違っているのでしょうか? ーーフレームページーー <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タトル</TITLE> </HEAD> <FRAMESET cols="100,*"> <FRAME name="menu.html.html" src="file:///D:/happystyle/menu.html.html"> <FRAME name="contents.html.html" src="file:///D:/happystyle/contents.html.html"> <NOFRAMES> <BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> ーーmenu.html.htmlーー <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タイトル</TITLE> </HEAD> <BODY> 画像置き場 </BODY> </HTML> ーーcontents.html.htmlーー <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タイトル</TITLE> </HEAD> <BODY> 画像表示 </BODY> </HTML> というHTMLを書きました! フレームに表示させたいページのHTMLはフレームと同じフォルダに入っているのですがこれと関係ありますか? どこがおかしいのかまったくわからないです 教えてください!

  • 文字化けについて

    文字化けで困っています。 教えてください。 下記のようなコードで、フォームに"猫"と入力すると、 "\0"と戻ってきてしまいます。 このときブラウザのurlにはtest.php?key=%C7%ADとでており、"%C7%AD"をurldecodeでデコードすると、"猫"となります。 ブラウザ内部のデコードがおかしいのかと思ったのですが、Firefox、IE共に"\0"が戻ってきます。 下記コードにまずいところがあるのでしょうか? もしくは、何か対処方法はないでしょうか? よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ecu-jp"> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <form action="test.php" method="get"> <input type="input" name="key" value="<?=$key ?>"> <input type="submit" value="実行"> </form> </body> </html>

    • ベストアンサー
    • PHP
  • IE8でCSSハックが効かないです。

    IE8でCSSハックが効かないです。 IE8のCSSハックを使用したくて、下記のように指定したのですが、 IE8で見るとIE8用に記述したCSSハックが効かないです。 ちなみにIE6用のハックとデフォルトで指定したクラスはきちんと表示されます。 記述方法が原因なのでしょうか。それとも他に原因があるのでしょうか。 教えて欲しいです。 ■サンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="keywords" content="キーワード1,キーワード2"> <meta name="description" content="ディスプリクション"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #main_contents p.test_style { font-weight: bold; color: #000; } /* IE6対策 */ *html #main_contents p.test_style { font-weight: bold; color: #ff0000; } /* IE8対策 */ html>/**/body #main_contents p.test_style { font-weight /*\**/: bold\9; color: #0033ff\9; } </style> <title>IE8表示テスト</title> </head> <body> <div id="main_contents" class="reset"> <p class="test_style">デフォルトのテキスト 黒で表示されます。</p> <p class="test_style">IE6用(css hack)のテキスト IE6で見ると赤で表示されます。</p> <p class="test_style">IE8用(css hack)のテキスト IE8で見ると青で表示されます。</p> <!--/main_contents--></div> </body> </html>

  • フレーム内 ( 子HTML ) からフレーム外 ( 親HTML ) のコンボボックスをJavaScriptで操作する方法は?

    下記のようなHTML(抜粋)のフレーム内(子)から、フレームの外側(親)のコンボボックスの値を変更(現在は「起」が選択されていますが、例えば、これを「承」に変更)したいのですが、JavaScriptをどのように記述すればよいでしょうか? Top.Hoge ( または、Parent.Hoge ) の後の書き方がわかりません。 (手持ちの書籍は一通り調べてみたのですが、探し方が悪いのか・・・?) ご存知の方、コメントを頂けると助かります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja-JP"> <head> <meta http-equiv="Content-Type" Content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="JavaScript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>題名</title> ........(略)........ <form name="form2"> // ↓以下、コンボボックス ( ドロップダウンリストボックス? ) <select name="Hoge" onchange="FunctionName(Args.......(略).........)"> <option value="0" selected>起 <option value="1 " > &nbsp;承 <option value="2 " > &nbsp;転 <option value="3 "> &nbsp;結 </select> </form> <tr><td colspan="3" align="center"> <iframe width="1200" height="800 "src="/........(Path)......../Hoge.html"></iframe> </td></tr>

専門家に質問してみよう