• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:続続・文字をクリックすると詳細文章が展開されるJS)

問題のIE8での動作について

このQ&Aのポイント
  • 私のPCのIE10で動作しているJavaScriptが、会社のIE8では動作しない。
  • IE10や他のブラウザでは問題なく動作するが、IE8では動作しないため、解決策を求めています。
  • IE8で動作するようにするための対策方法を知りたい。

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ざっと見ただけですが… jQueryはバージョンによって対応ブラウザが変わっていますので、使用するブラウザのバージョンに基づいて確認した方がよいでしょう。 http://jquery.com/browser-support/ また、回答例のマークアップはHTML5になっていますが、HTML5対応のブラウザで無い場合はHTML4.01に書換えたほうがよろしそうです。 その際に、CSSのセレクタ及びスクリプトのセレクタも併せて修正が必要になるでしょう。 ブラウザのバージョンによってはCSSの兄弟セレクタ(+)が効かないものがあるかも知れませんので、その場合はセレクタ指定を修正する必要があるかも知れません。 (↑)くらいに後から出てきたものを無くせば、かなりのブラウザでも動作するのではないでしょうか? 他に使っていないのでしたら、いっそのことjQueryもはずしてしまうという手もあるかもしれませんね。

litton101
質問者

お礼

fujillinさん、ご回答ありがとうございました。 <section>など見慣れぬタグがあるとは思いましたが、 HTML5の記述だったのですね。 兄弟セレクタ(+)というのも記述的には初めてみたものです。 アドバイスを踏まえ、結果的には、<section>を<blockquote>に変更してみたら 周囲の一通りのブラウザで動作するようになりました。 ご教示ありがとうございました。非常に勉強になりました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

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

過去の質問見ました。  HTMLのDOCTYPEが、<!DOCTYPE html>になっていますが、これはHTML5を示すというより、ブラウザに対して「標準モードで動作させるためのスイッチ」の機能以上の意味はありません。  そのために、HTML5で導入された新しい要素を認識できないブラウザでは、きちんと認識できない可能性があります。  まえも、お答えしたような気がするのですが・・。直接ではなくサンプルかもしれません。  後方互換を考える場合は、現状ではHTML4.01strictを標準モードで起動するようにDOCTYPE宣言をするのがベストです。  すなわち <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> です。  これで、IE6以降は[標準モード]で動作するはずです。 ★気になったのですが、HTML5では、DIVはよほどのことがない限り使いません。 【引用】____________ここから Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element )]より  簡単に訳すと『著者は、 div 要素は他に適した要素がないときなど、最後の最後の手段のとして使用することが強く推奨されます。もっと適切な要素を使うことによって、読者にはアクセシビリティ向上に、著者にとってはメンテナンス性の向上につながる。』  これは、<div class="wrapper"><div class="content">のような使い方はするな!!と言っているのです。 <article>:そのブロックにheader,section,footerを持つと期待される、完結した記事 <section>:文書のアウトライン(簡単に言うと目次を作れる樹構造)を構成する集合      基本的に見出しh1~h6を一つだけ持つと期待される などを使います。  HTML4.01でしたら、 <body>  <div class="article">   <div class="header"></div>   <div class="section"></div>   <div class="footer"></div>  </div> </body>  とするはず 【引用】____________ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )]より  class名の具体的な意味は「新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」  こうしておくと、将来全面的にHTML5に変更する時代が来たとき、簡単に書き換えることが出来ます。  英文ですが、その例が Preparing for HTML5 with Semantic Class Names — Jon Tan 陳( http://v1.jontangerine.com/log/2008/03/preparing-for-html5-with-semantic-class-names )  にあります。

litton101
質問者

お礼

ORUKA1951さん、ご教示ありがとうございました。 <!DOCTYPE html>がHTML5(標準モードで動作させるためのスイッチ)とは知りませんでした。 過去質問に書きましたように、 CMSのBODY内しか編集権限がないため<!DOCTYPE>部分は書き換えられないのですが No1さんのお礼に書いたとおり、sectionをblockquoteに書き換えて 取り急ぎ今回は動作を確保できたようです。 divを使わない件も知りませんでした。 いろいろと非常に勉強になりました。ありがとうございました。 #1さん、#2さんとのベストアンサーにしたいのですが、今回は先にご回答いただいた#1さんへという ことでご容赦下さい。本当にありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 続・文字をクリックすると詳細文章が展開されるJS

    http://okwave.jp/qa/q8158253.html でいただいた回答、ローカルではIE10、FF、Chromeで動作したと喜びの御礼を申し上げました。 実は組み込み先が、自社で導入しているCMS(コンテンツマネージメントシステム)でして、 <body>内の一部しか編集権限がありません。 ローカルではIE10、FF、Chromeで確かに動作したのですが、 CMSに組み込むと、動作しなくなる(クリックしてもプルダウン展開されない)ことがわかりました。 もしかして、<head>内でなく、<body>内に <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. … <style type="text/css"> などと記述しているからか?と疑い <style type="text/css"> section h2 { color: #333; background: #ccc; border: solid 1px #999; cursor: pointer; } ・・・・みたいなCSSの記述を、HTMLタグに組み込んで、 <h2 style="color: #333;background: #ccc;border: solid 1px #999;cursor: pointer;">第1章 前転のやり方</h2> みたいにしてみたのですが、やはりローカルではきちんと動作するのに CMSに組み込むと動作しません。 あ、正確には、CMSに組み込んでもFF22やChrome27では動作するんですが、 IE10や(IE10でのIE9互換モード)などでは動作しない(クリックしてもプルダウン展開されない)と いう具合です。要するにIEに依存した問題のような気がしてますが、 プログラムが完全なだけに、何かちょっとした記述の変更で、IEで動作させられないでしょうか? 本仕様が、非常に気に入ったので、あきらめたくありません。

  • 文字をクリックすると詳細文章が展開されるJS

    本の販売ページをつくりたいと思います。 以下の目次のように3章建て、それぞれに400字の要旨がついているとします。 第1章 前転のやり方 第2章 後転のやり方 第3章 倒立のやり方 各章名をクリックすると要旨が展開され、再度クリックすると閉じる(折りたたまれる)ようにしたいのです。例えば、第1章をクリックすると 第1章 前転のやり方    ここに400字の要旨が展開ここに400字の要旨が展開    ここに400字の要旨が展開ここに400字の要旨が展開    ここに400字の要旨が展開ここに400字の要旨が展開    ここに400字の要旨が展開ここに400字の要旨が展開 第2章 後転のやり方 第3章 倒立のやり方 ブラウザ依存なく、せめてIE、FF、Chrome、Safariだけは動作するようにしたいです。こういうJavascript(またはCSS)をご教示いただけないでしょうか。

  • 異なるIEのバージョン確認

    タイトル通りなのですが何を使っていますか? 私は、IE9をインストールしておりその他のバージョンの確認にはIETesterを使っているのですが、jsを使っているサイトだとよくクラッシュしタブの復元を行っても全く確認はできない状態です。 調べたところIE9の開発者ツールで、ブラウザーモードとドキュメントモードというのが使えるようで試してみました。 IE8にも対応する角丸のCSSを作成し見てみると次の結果となりました。 ・普通にIE9→角丸 ・ブラウザーモードがIE8でドキュメントモードがIE9→角丸 ・ブラウザーモードがIE7でドキュメントモードがIE9→角丸 ここまではいいのですがドキュメントモードをIE9以外にするとブラウザーモードを何にしても角丸では表示されません。 初めて使ってこの結果となり正しい動作なのかもわからない状況ですがきちんと確認できる方法はないものかと思い質問させていただきました。 Microsoft Expression Web SuperPreviewも使ってみましたがトライアル期間が過ぎているせいか画像でしか確認できず、FireFoxのIEタブも試してみましたが表示されたりされなかったりと不安定でいまいち信用できない感じです・・・ IEの自動アップデートも始まるようなのでせめてIE8まではきちんと確認できればいいのですが。

    • ベストアンサー
    • HTML
  • FireFoxが重い

    http://okwave.jp/qa/q8601530.html 上記でインターネットが重いことを質問したのですが、重いときに他のブラウザ(IE)を使ったら、問題なかったです。 firefoxの動作を軽くする方法(キャッシュ、クッキー削除でも一時的な対処にしかなりません…)あればお願いします。

  • IE9お気に入りバーのタブの文字サイズ

    困っているわけではないのですが、 「Windows7 「お気に入り」部分の文字 - Windows 7 」 http://okwave.jp/qa/q6932944.html が解決しているようですが、どのような方法で行うのかがわかりません。教えていただけませんか。 環境はWindows7 SP1 IE9です。

  • IEでの不具合

    ヤフオクで「戻る」をクリックするとスクロール位置が一番上まで勝手に戻ります IEは11で OSは7です http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1010171070... によるとブラウザモードにするといいらしいですが IE11でのやり方が分かりません

  • OSの差別・入力拒絶の運営

        ドライバーやアプリ類は、主流機種の Mac系 か Windows系 のどちらでも、選択操作か自動弁別などで不便なく使えるはずです。 が、近年はOS大更新の影響かMicrosoft系以外は使えない操作制限があるようです。 OkWaveの場合は、Windows系のブラウザ [I.E] (エキスプローラ)を本筋にし、他のOS・ブラウザなどのアプリには対応しないのがOkWaveの方針との事務局談です。 Windows系PCもありますが、Win.機よりもMac機が便利なので常用し困ってます。 OkWave掲示板は、質問や回答は自由にできますが、MacOSのサファリブラウザでは、質問は入力できても、「補足」、「お礼」、「ベストアンサー」設定、 頁末「コメント」入力  などが操作不可能です。 補足やお礼などの項目・入力枠すら表示されない場合もあります。 以前はそんなこたぁなかったです。 ハシゴを掛け掲示はできるが、外れておりられない、という形です。 Mac は、特殊な設定は何もしてない、ごく通常の標準使用状態です。 ( 質 問 ) 主流機種の、Mac系 ( [サファリ] ブラウザ) もWindows系 ( [I.E] エキスプローラ) も、差別なく使えるようにすべきではないでしょうか。 OSの差・アプリ類が違うと操作不能の方針は正しいのでしょうか? ご意見なんでもお知らせ下さい。 ただし、常識無知やPCの見識に外れるようなご意見は無視します。 ( 状 況 ) 一般的な質問者の場合、OlWave 掲示板で近年約8割が、的確な回答が出ていても質問者が補足・お礼 を、回答者全員の誰にも全く記載しない状況を見ます。 これは質問者のブラウザがMac系のため、追記入力が不可能となっているのが実態ではないでしょうか。 パソコンの分野で、MacOS とWindows とでは、どちらかと言えば MacOS を優先すべきでWindows は不純な模倣版だけでなく邪悪な営利事業のOSです。正邪の真相が殆ど知られず、Windowsを選ぶと曲者に加担する結果になる意識が無いまま Win.が採用され普及しているのが、実情です。 これは真実です。 この辺の経緯は、真相を調べ根拠や裏付もあり、監修付きのウェブサイトがありますので、参考にして下さい。 読まないのは自由ですが、読めば少しは得する筈です。  『パソコン使いの基礎情報』 http://ctzn07.blog.fc2.com/ ( 参 考 ) OkWave 掲示板への私の関与掲示で、近年は約8割が 補足など無記載の傾向です。 質問者が補足などの入力を面倒がるにしては数が多すぎます。 機能制限の不可抗力が原因ではないでしょうか。 若干の実例を示しておきます。 入力拒絶の実例 (考える範囲) https://okwave.jp/qa/q9555976.html?f=category (塗装の除去) https://okwave.jp/qa/q9553700.html (長管の運搬) https://okwave.jp/qa/q9549842.html (電話機増設) https://okwave.jp/qa/q953 9623.html (廊下の遮音) https://okwave.jp/qa/q9527168.html (外国の宛名) https://okwave.jp/qa/q9529949.html (印刷の設定) https://okwave.jp/qa/q9529257.html (電話機接続) https://okwave.jp/qa/q9526960.html (ゴキの餌台) https://okwave.jp/qa/q9525018.html (油性の塗料) https://okwave.jp/qa/q9505577.html?f=category (超強両面貼) https://okwave.jp/qa/q9478725.html?f=category (重載ネジ止) https://okwave.jp/qa/q9434163.html?f=category   https://okwave.jp/qa/q9402379.html (PC保存検索) https://okwave.jp/qa/q9401853.html (まだまだありますが、この辺で)

  • IE7のVB.NETでの操作

    Dim IE as Object Dim f As Object IE = CreateObject("InternetExplorer.Application") f = IE.document.forms(0) f.sentaku.click() このようにしてIEのボタンを押そうと考えているのですが、f = IE.document.forms(0)のところでエラーがでて止まってしまいます。 IE7はこのような操作はできなくなってしまったのでしょうか。 IEを終了して開き直して試しても同じ結果で困っています。 解決策を教えてください。 よろしくお願いします。

  • 関数名の取得

    http://blog.livedoor.jp/dankogai/archives/51759681.html こちらでは、 getFunctionName = function(f){ return !f ? f /* like document.constructor in IE */ : 'name' in f ? f.name : f.name = (''+f).replace(/^\s*function\s*([^\(]*)[\S\s]+$/im, '$1'); }, このような関数を定義されていますが、 !f ? f /* like document.constructor in IE */ は一体どのような意味なのでしょうか。 少し調べてみたところ、 ブラウザ , document.constructor , typeof(document.constructor) , !document.constructor IE5 - 7 , undefined , undefined , true IE8 , [object HTMLDocument] , object , false IE9 - 10 , [object Document] , object , false ということで、こういった対策が必要な所はないと思うのですが。。 それとも、持っていないIEのバージョンでバグでもあったのでしょうか。

  • 標準準拠モードと後方互換モードのJavaScriptのパフォーマンスに

    標準準拠モードと後方互換モードのJavaScriptのパフォーマンスについて ブラウザはWindows IE8限定とします。 HTMLファイルのDOCTYPE宣言によって標準準拠/後方互換モードを切り替えられますが、 下記JavaScriptをそれぞれで走らせた場合、明らかに標準準拠モードが遅いです。 この差の原因は何なのでしょうか。 後方互換モード程度にまで速度を改善することはできないのでしょうか。 for (var i = 0; i < 10000; i++) { var t = document.createTextNode(i + ", "); var o = document.createElement("div").appendChild(t); document.getElementById("test").appendChild(o); }