IE9でCSS3が機能しない

前へ 次へ
このQ&Aのポイント
  • IE9でのCSS3の機能制約についてお伺いします。
  • htmlのidやclassがほとんど記述されないページで、CSS3の編集を試みていますが、IE9では機能しません。
  • CSS側だけでなんとか要素を取得する方法はあるでしょうか？
回答を見る
  • ベストアンサー

IE9でCSS3が機能しない

CSSセレクタについてお伺いします。 あるショッピングカートサイトを使っているのですが、このサイトはhtmlは編集できずCSSしか編集できないページがあります。 このページのデザインをなんとか編集したいと奮闘しています。 そのサイトのhtmlは不親切にもidやclassがほとんど記述されていません。 そのため:nth-child(n)などを使ってなんとか要素を編集できそうでした。 しかしfirefoxやchrome、operaはこの:nth-child(n)が機能するのですが IE9では機能しません。 IE9ではhtmlの宣言を<!DOCTYPE html>と記述しないとCSS3 は使えないのでしょうか？ CSS側だけでなんとかclassなどの指定がない要素を取得する方法はないでしょうか？ よろしくお願いいたします。

  • suffre
  • お礼率76% (2013/2633)
  • CSS
  • 回答数2
  • ありがとう数2

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

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

兄弟セレクタを使いましょう。 ＞そのサイトのhtmlは不親切にもidやclassがほとんど記述されていません。 　そもそもデザインのためにidやclassを書くものではありません。『id属性及び class属性と併用することで、文書に構造を付加するため ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』のものですよ。とても多くのサイトで、idやclass名を使ったセレクタが書かれていますが、それはプロパティの説明のためで、本来はリンクやjavascriptのターゲット以外idは書く必要ありませんし、class名も文書構造をわかりやすくするため以外には必要ないはずです。 　:nth-child(n)は使えなくても、 1) 兄弟セレクタは使えるはずです。 2) 属性セレクタも使えるはずです 　私は、デザインのためにidやclass名が必要と感じたことはありません。 円形の配置にするコーディングについて - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7649067.html )　IE8でもOKなはず。 　で示したHTML/CSSは、文書構造を示すためにclass名やidが使われていますが、デザインではセレクタで文書構造を元に適用する要素を指定していますが、直接class名やidで指定していないのがわかるのではないかと・・ 　文法的に間違っていない--DOMツリーがきちんと生成的ないページでない限り、CSS2.1の範囲内で要素は指定できるはずです。

suffre
質問者

お礼

お世話になります。ご回答頂きましてありがとうございました。 兄弟セレクタ、属性セレクタは使えました。 リンク先の件を読みました。 idやclassは最小限で文章構造を示すために記述すべきなのですね。 今まではそういう意識はしていませんでした。 アドバイスありがとうございました。

その他の回答 (1)

回答No.2

対応していない機能についてはドキュメントタイプを変えてもどうにもなりません。 <!DOCTYPE html>はHTML5のやつでCSSとは関係ないです。 無名divの山なんでしょうか。 私も昔そういうカートのカスタムをしてうんざりした覚えが…どこだったか思い出せないんですが セレクタの対応状況が見れるサイトを参考URLにリンクするので、それを見ながらなんとかがんばってみてください。

参考URL：
http://www.quirksmode.org/css/contents.html
suffre
質問者

お礼

ご回答頂きましてありがとうございました。 そうです、無名divが大量にあります・・・。 セレクタの一覧ページ、参考になります！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 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
  • CSSをIEが読み込んでくれません。

    CSSをつかってページを作りました。 Firefoxでは、表示は問題なかったのですが、 IE６・７でCSSを読み込んでくれません。 IEのバグなのでしょうか？それともCSSの記述間違いなのでしょうか？ どなたか修正方法を教えて頂ければと思います。 よろしくお願い致します。

    • 締切済み
    • CSS
  • アメブロのＣＳＳについて

    今、ＣＳＳを勉強中で、勉強したことを復習するために、 ブログのＣＳＳを覗いてみてるのですが、 アメブロの編集可能ＣＳＳのところに、 /* 通常文字 */ .skinTextColor,.skinBaseTextColor,.skinBlock,body{ color:#333333; } というのがあります。 ＣＳＳは、セレクタ、プロパティ、値からなると勉強しました。 このセレクタのうち３つは、class指定されてるものだと思うのですが、 skinTextColorと、skinBaseTextColorは ＨＴＭＬの中に見つけられませんでした。 （TeraPadに貼り付けて、検索機能でチェックしました） そういうことってありえますか？ 例えば、ＣＳＳが外部にあるように、 そのクラス指定のタブもどこか違うページにあるのでしょうか？ 素人で、よくわかってないので、 質問がおかしかったらすみません どなたかわかる方がいらっしゃいましたら、教えていただけると嬉しいです。

    • ベストアンサー
    • HTML
  • str_replaceがうまくいきません

    Dust-Me Selectorsを使い、使用していないCSSセレクタを探したところ、930件ほど出てきました。 私のサイトはCSSはstyle.css一つにまとめています。doctype.cssの内部は .class1,.class2{…}.class1,.class3,.class4{…},… の形で一行のみ記述されています。 使われていないCSSセレクタは、used-doctype.txt中に、 .class1 .class3 .class4 ： ： の形で記述されています。.今、次のPHPコードを実行しようと思います。 <?php $css=file_get_contents("./doctype.css"); $handle = fopen( "./used-doctype.txt", "r" ); $null=""; while ($array = fgetcsv( $handle )) { //echo $array[0]; str_replace($array[0],$null, $css); } echo $css; ?> しかしechoされた結果では、class1、class3、class4がいずれも確認されます。 while中での$array[0]のechoは成功していますので、str_replaceがおかしいと思うのですが原因が判りません。 どこを変更すれば、$cssからclass1、class3などを除去できるでしょうか。 どなたかご教示のほど、どうかよろしくお願いいたします。

    • ベストアンサー
    • PHP
  • IE7以下でcssが読み込まれません。

    はじめての投稿です。 現在wordpressで会社のサイトを制作しているのですが、 IE7以下で、htmlはすべて読み込まれているのですがcssが読み込まれていません。 ・php初心者です。html、cssに関しては一通り記述できます。 ・IE8、chlome、firefoxでは正常に動作しています ・テキストエディタ（terapad）を使用して記述しています。 ・ffftpにてアップロード。 ・css、htmlの保存形式はUTF-8N。 ・cssの一番最初に@charset"utf-8";を記述。 ・htmlにもUTF-8を宣言しています。 ・サーバ：ロリポップ 何か必要な情報がございましたら、ご連絡いただければ回答いたします。 どうすればie7以下でcssを読み込むのでしょうか？ どういった可能性があげられるでしょうか？ ご教授よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSS3の対応

    CSS3ってどれくらい皆さんはどれくらいつかっていますか教えてください 質問1 スマホサイトでCSS3は全力で使えるんですか?（アンドロイドも） 質問2 スマホサイトはCSS2.1のセレクタだけでつくってもいいですか？（かっこ悪いですか？） 質問3 みなさんはパソコン用webサイトでCSS3はどのくらいつかっていますか？ 質問4 パソコン用WEBサイトで隣接セレクタと子供セレクタなどIE6が表示できないセレクタはつかっていますか？ ブラウザIEの対応なのですがIE9が丸角とbox-shadowくらいですよね？ IE6～IE8が亡霊のように残っているので困っています

    • ベストアンサー
    • CSS
  • IE6でCSSの一部の記述をを読み込まない

    IE6でCSSの一部の記述を読み込まないので、困っています。 上位のIEやモダンブラウザーでは出ない症状です。 解決策の判る方に、お助けをお願いします。 外部CSSに書いた内容で、反映するものと反映しないものがあります。 div#main { } とかはOKで、p.small { } 、td.com { } などの classに書いたものが、効きません。 他にも、h2 { } 等も効きません。 IE6は、CSSのコメントを閉じる前に全角文字があるとエラーになるとか、 HTMLとCSSの文字コードが違うとエラーとか、ありました。 該当はしていません。 classを複数並列記載するとエラーなど、Googleで探したら、 ありましたが、そのようなな複雑なことはやっていません。 他に、IE6がCSSの一部の記述を読み込まないエラーの原因となるものは、あるのでしょうか。 一部の内容です。 CSS========== @charset "UTF-8"; 以下、略 HTML========== <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="base.css" type="text/css" /> 以下、略 思い当たる原因として、 <body>の上に、wrapper を以下のように定義して、センター配置しています。 div#wrapper { width:800px; 　　　 height:100%; 　　　 position:absolute; 　　　 top:15px;left: 50%; 　　　 margin-left: -400px; background-color: transparent; margin-bottom:0px; } この子要素や孫要素に、コンテンツが書かれています。 孫要素は、float している場合もあります。 そのような構造では、本題のエラーが出るものなのでしょうか？ お助け願います。

    • ベストアンサー
    • CSS
  • 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>

  • IE用CSSが適用されない

    通常は12pxを指定して、IEのみフォントサイズを11px指定したいのです。 <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]--> <style> body { background-color:#FFFFFF; color:#333333; font: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif; } #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } </style> </head> <body> <div id="figure_main"> <div class="box1"> <span>取締役会</span> </div> <div class="box1"> <span>取締役社長</span> </div> <div class="box2"> <span>常勤役員会</span> </div> <div> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> </div> </body> </html> HTMLには<!--[if IE]>を記述し、 ie.cssには @charset "utf-8"; /* CSS Document */ #figure_main { font-size:11px; } と記述しましたが、適用されませんでした。適用されない理由を教えてくださいますか？ 宜しくお願いします。

    • ベストアンサー
    • HTML
  • IEでCSSを動的に切り替える方法

    もう３日間悩んでおりまして、糸口がつかめずご質問させていただきました。 何でも結構ですのでアドバイスいただけましたら助かりますm(_ _)m 【やりたいこと】 IEで画面をリロードすることなくCSSを再読込して適用させる。 【試した方法でIE以外では動いたもの】 http://phpspot.org/blog/archives/2009/08/css_91.html http://allabout.co.jp/gm/gc/23930/4/ 【本当にやりたいこと】 AjaxでPOSTして、戻ってきたページ全体のHTMLを使ってページ全体を上書き更新したい。 それはPOSTすることで画面の表示位置をずらしたくないためです。 IE（６，７，８）以外ではうまくいっていそうです。（FF3、Chromeで確認） IEだと、CSSが不完全に適用されているようなくずれた画面になるため ＣＳＳを再読込してリフレッシュできたら、解決すると考えたわけです。 検索していると、IEはCSSの動的切り替えに対応していないような記述もあったり。。 よろしくお願いしますm(_ _)m

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する