html5.jsを使うとIE8以下で真っ白になる

このQ&Aのポイント
  • html5.jsを使用してIE8以下での表示問題を解決しようとしたが、開発モードで真っ白になってしまう
  • IE8以下ではhtml5.jsを無視した状態で表示される
  • エンコードの問題ではなく、html5.jsが原因ではないか疑われる
回答を見る
  • ベストアンサー

html5.jsを使うと、IE8以下で真っ白になる

html5で作成したもので、ie8以下に対応させるため、 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> を使用しましたが、IEでの開発モードで、標準、互換モードともに、ie8以下真っ白になってしまいます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title>~</title> で書いています。 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> の部分をなくすと、ie8以下では、html5を無視した形で表示されます。 この原因は何でしょうか。エンコードを疑いましたが、どうやらこのjsのようなのですが。

  • puhui
  • お礼率34% (112/329)
  • HTML
  • 回答数2
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

<!--[if lt IE 9]><![endif]--> じゃ無くて <!--[if lt IE]><![endif]--> そのまえに、HTML5として正しいか否かを  ⇒Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) でチェック

その他の回答 (1)

回答No.1

~</title> よりも下に書かれている部分に問題があるのでは?

関連するQ&A

  • HTML5について

    ものすごく初歩なことをたずねたいのですが、 IE8以前にに新しい要素を認識させる方法として <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> があると知ったのですが、 これを<head>内に記述すると、当然きちんと認識されるのですが、 画面を見た時に一番上に<!--[if lt IE9]> <![endif]--> と表示されてしまいます。 ・・・この文字は消せないのでしょうか?

  • HTML5について

    前回質問したのですが解決せず、日にちがだいぶたってしまったので、 再度質問させて下さい。 IE8以前にに新しい要素を認識させる方法として <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> があると知ったのですが、 これを<head>内に記述すると、当然きちんと認識されるのですが、 画面を見た時に一番上に<!--[if lt IE9]> <![endif]--> と表示されてしまいます。 ・・・この文字は消せないのでしょうか? 使用しているブラウザはIE8とIE6です。 【HTMLソース】 <!DOCTYPE html> <html> <head> <!--[if lt IE9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="style_html.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> <meta charset="shift_jis" /> <title>HTML5</title> </head> <body> <h1>HTML5</h1> <section> <h2>タイトルなんちゃら</h2> <p>あけましておもでとうございます。今年もよろしくお願い致します。</p> </section> </body> </html> ・・・・・・どこが間違っているのか分からず困っています。 ご指摘どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • XP Pro SP3 / IE8で表示されない

    以下のようなHTMLのページを作成したのですが、XP Pro SP3 / IE8環境では、ページが正常に表示されません。どのような点を直せば表示されるのでしょうか。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> <script src="./scripts/common.js"></script> <!--[if It IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"><script> <![endif]--> <link href="./styles/style.css" rel="stylesheet" type="text/css" /> </head> <body> <header> <h1><a href="./" title="タイトル">タイトル</a></h1> </header> <article> <p>本文</p> </article> <footer> <p id="copyright"> Copyright(C) hogehoge all rights reserved. </p> </footer> </body> </html>

    • ベストアンサー
    • HTML
  • レスポンシブwebデザインをIEに対応させる方法

    レスポンシブwebデザインのIEへの対応について質問です。 XHTMLで作成したHPをメディアクエリを使用して、レスポンシブwebデザインにしたのですが、 IE8以下で全くCSSを読み込みません。 いくつかのHPを見て、header内に <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> を記述しているのですが、それでもうまくいきません。 CSSは外部ファイルで読み込ませてあり、 <link rel="stylesheet" media="only screen and (min-width: 481px)" href="style.css" /> このような形で記述してあります。ですので、 http://www.imaginationdesign.jp/blog/html5css3/1592/ これとも違うようですし、原因がわかりません。 どなたか原因がお分かりになられる方おりますでしょうか?

    • 締切済み
    • CSS
  • ie8メディアクエリによるcss分岐ができない

    ie8でメディアクエリによるcssの画面サイズ分岐ができなくて困っています。 環境は、windows XP Service Pack3です。 1.下記方法でIE8以下にもHTML5とメディアクエリを使えるようにしました。  (HTML5はバリデータでチェック済みです。) <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> 2.下記方法でデバイスの横幅に対応したcssを指定しました。 <link href="smartphone.css" media="screen and (max-width:480px)" rel="stylesheet" type="text/css"> <link href="tablet.css" media="screen and (min-width:481px) and (max-width:1024px)" rel="stylesheet" type="text/css"> <link href="pc.css" media="screen and (min-width:1025px)" rel="stylesheet" type="text/css"> 3.現象 a. firefoxではローカル上のページもサーバー上のページも適用されていました。 b. ipodではサーバー上のページしか見ていませんが、適用されていました。 c. しかし、ie8ではローカルでもサーバーにアップしてもcssが適用されません。 d. ie8では、media="screen"だけの場合は適用されていますが、and以降のサイズ指定が入ると適用されません。 e.type=などの指定もアリ、ナシどちらの組み合わせも適用されません。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • DreamweaverでIE用Java反映されない

    Dreamweaver でWebを作成しているのですが、IE用に作ったJavascriptが反映されません。テンプレートに書き込みブラウザで確認するとOKなのですが、そのテンプレートを使用したほかのページにはうまく反映されません。どうしてでしょうか? 他の文字情報やDivなどはテンプレートに応じ自動で変更されるのですが、IEに関する部分だけ反映されません。 見よう見まねで作っているところがあるので基本的な知識が足りないので、分かりやすくご説明いただければ本当に助かります。 使用環境 Dreamweaver5.5 <head>の上に <!--[if lt IE 7]><html class="ie ie6" lang="ja"><!endif]--> <!--[if IE 7]><html class="ie ie7" lang="ja"><!endif]--> <!--[if IE 8]><html class="ie ie8" lang="ja"><!endif]--> <!--[if (gte IE 9)|!(IE)]><!--><html lang="ja"><!--<![endif]--> 参考書には、全ての行は <![endif]--> で終わるように書いてあるのですが、そうするとなぜかテンプレートを更新できません。 <head>内に <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="js/ie.js"></script> <link rel="stylesheet" href="../css/ie.css" type="text/css"> <![endif]--> ie用のJavascriptには下記を記入 (function($){ $(function() { $(".list-2column li:nth-child(2n)").addClass("child2n"); $(".list-3column li:nth-child(3n)").addClass("child3n"); $(".list-4column li:nth-child(4n)").addClass("child4n"); }); })(jQuery); 是非よろしくお願いいたします。

    • 締切済み
    • CSS
  • http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.jsを入れたらCSSが効かなくなりました

    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script> をheadに入れたら何故か * { font-family: serif; color:#FFFFFF; } h1 { font-size:48px; } が反映されなくなりました。 他のテーブルなどは問題なく反映されているのですが、、 CSSは外部ファイルで読み込んでいます。 どうすれば反映されるのでしょうか?

  • JAVAScriptライブラリのリンク先

    先日質問したところ、別件でJQueryなどのライブラリは googleやmicrosoft がホスティングしてるJavaScript を いろんなサイトで読み込んで、ローカルキャッシュが はたらくことを期待するのが主な戦略とお聞きしました。 今回悩んでいるのがcanvasのライブラリです。 •http://explorercanvas.googlecode.com/svn/trunk/silverlight/excanvas.js に対して <script src="http://explorercanvas.googlecode.com/svn/trunk/silverlight/excanvas.js "></script> と書けばいいのでしょうか。 それともURLが変わる可能性があるので危険なのでしょうか。 uupaa-excanvasもあると聞き、調査してみると http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/ の配下にもexcanvas.jsとuupaa-excanvasがあり混乱しています。 何をどう直リンすればいいのか、直リンはやめた方がいいのか等 アドバイスを宜しくお願いします。

  • IE対応 HTML5 こちらでよろしいでしょうか。

    IE対応 HTML5 こちらでよろしいでしょうか。。。 様々なサイトを見て ■ reset.cssは使わず normalize.css を使用。 ■ modernizr.jsではなく selectivizr.js を使用。 ■ cssの拡張に CSS3 PIE を 使用。 http://css3pie.com/ としております。 読み込ます順番が違うなどありますでしょうか。 併用するとエラーになるファイルはありますでしょうか。 よろしくお願いいたします。。。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="format-detection" content="telephone=no"> <meta name="robots" content="all"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/main.css"><!-- 自分の記述するcss --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/plugins.js"></script> <script src="js/main.js"></script><!-- 自分の記述するjs --> <!--[if (gte IE 6)&(lte IE 8)]> <script src="js/selectivizr.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> </head> <body> ~ </body> </html>

    • ベストアンサー
    • HTML
  • jQueryでカウントダウンタイマーのループ

    jquery-countdownのタイマーを作っています。 同じ時間を何度も繰り返す タイマーにしたいのですが うまくいきません。 jquery-countdown http://code.google.com/p/jquery-countdown/ demostration http://jquery-countdown.googlecode.com/svn/trunk/index.html このタイマーを ループさせたいと考えています。 15行目の timerEnd: function() { alert('end!!'); }, を変更するかと思いますが どのように変更すれば 何度も繰り返すループになるでしょうか? <html> <head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script src="http://jquery-countdown.googlecode.com/svn/trunk/js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $('#counter').countdown({ stepTime: 60, format: 'mm:ss', startTime: "00:10", image: 'http://jquery-countdown.googlecode.com/svn/trunk/img/digits.png', digitWidth: 53, digitHeight: 77, timerEnd: function() { alert('end!!'); }, }); }); </script> </head> <body> <div id="counter"></div> </body> </html>

専門家に質問してみよう