• 締切済み

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
  • 回答数3
  • ありがとう数11

みんなの回答

回答No.3

少しチェックしてみました。 互換モード時には上手く作動しないみたいです。 手元の環境だと標準準拠時には適用されました。

回答No.2

そのハックって正式版のIE8でチェックされましたか? 出た時はベータ版の時で、私が自分で試した時も正式版では上手く動かなかった気がするのですが・・・

  • rurino
  • ベストアンサー率55% (38/68)
回答No.1

ところどころ入ってる「¥」マークがいらない…ような……気がします。

関連するQ&A

  • CSS : IEとFirefoxの表示差異を改善したい

    grandswellと申します。 よろしくお願いいたします。 サンプルをIE、Firefoxそれぞれで見ていただけると わかっていただけると思うのですが、Firefox側が 意図した通りのレイアウトになっていません。 サンプルをIEで表示したレイアウトを Firefoxでも同じCSSで実現するにはどのような 工夫が必要でしょうか。 ぜひご教示くださいますよう、お願いいたします。 以下、サンプルのCSSとHTMLとなります。 *cssサンプル(style2.css) ---------- div.main { border-style : dashed; width : 100%; } div.main div.contents{ border-style : dashed; width : 75%; float : left; } div.contents div.contentsmain{ border-style : dashed; width : 100%; } div.contentsmain div.sidebar{ border-style : solid; float : left; width : 32%; } div.contentsmain div.entry{ border-style : solid; float : right; width : 66%; } div.main div.subspace { border-style : dashed; float : right; width : 23%; } div.footer { border-style : dashed; } ---------- *htmlサンプル ---------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style2.css" type="text/css"> </head> <body> <div class="main"> <p>main</p> <div class="contents"> <p>contents</p> <div class="contentsmain"> <p>contentsmain</p> <div class="sidebar"> <p>sidebar</p> </div> <div class="entry"> <p>entry</p> </div> </div> </div> <div class="subspace"> <p>subspace</p> </div> </div> <div class="footer"> <p>footer</p> </div> <body> </html> ----------

    • ベストアンサー
    • CSS
  • IEでCSSの中央寄せが効かない

    common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。 どのようにしたら良いでしょうか?

    • ベストアンサー
    • 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
  • 使用環境:WINVISTA、IE8

    使用環境:WINVISTA、IE8 ホームページ作成にあたり、CSSを使用しています。 使用フォントをメイリオにしたいので下記のように指定しています。 body { font-family: "メイリオ", Osaka, "MS Pゴシック", sans-serif; } また、HTMLファイルのheadタグには下記のように指定しています。 <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <title>○○○○○○○<title> <link href="design/style.css" rel="stylesheet" type="text/css" /> </head> 指定方法は間違ってはないと思うのですが、フォントが変わってくれません。 試しにfont-weight:bold; を指定すると太字にはなるのでパスの指定などは問題ないと思います。 何か考えられる原因・対処法はございますでしょうか。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • cssハックでIE9にも対応させるには?

    CSSでFirefox,chorme,IEなどブラウザ間で色を統一させたく、 下記のようなcssハックを使いました。 IE6,7,8ではちゃんと反映されましたが、IE9では反映されませんでした。 IE9でも反映させるためには、どのようにしたら良いでしょうか? <!--[if IE ]> <style type="text/css"> #ie_color {background-color: #777777;} </style> <![endif]-->

    • 締切済み
    • CSS
  • FirefoxだとCSSが利かない

    はじめまして。独学でHTMLを勉強しているのですが、"test_index.html"という 名前のファイルを作成してみました。内容は以下の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>TEST</title> <link href="test_style.css" rel="stylesheet" type="text/css"> </head> <body> <p class=01>TEST</p> </body> </html> CSSファイル"test_style.css"の中身に .01{color:red} とだけ書いて表示させてみましたところ、IE6とLunascapeでは問題なく赤く表示 されるのですが、Firefoxでは反映されませんでした。 低次元の質問かとは思いますが、解決策をご教示頂ければと思います。 どうぞよろしくお願いします。

  • 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
  • 印刷曜CSSがどこかおかしい・・・非常に困っています。。。

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <link rel="stylesheet" type="text/css" media="print" href="print.css"> <style type="text/css"> <!-- .style1 { font-family: "MS Pゴシック"; font-size: 12px;} --> <style type="text/css" media="print"> .print { display: "none" } </style> </style> </head> <body> <span class="style1"><p class="print"><p class="print2"><a onclick="window.print();return false;" href="#" >おおお</a></p></p></span> とソースに記載すると、「おおお」が印刷されないと思うのですが、なぜか、「おおお」が印刷されてしまいます。 どうすれば、「おおお」を印刷されなくなるのでしょうか?

    • ベストアンサー
    • HTML
  • ファイヤーフォックスでCSSが読み込まれません

    会社のホームページを担当していて困っています。 IEでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか? よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>

  • cssがIE6で適用されない理由は

    教則本を見てcss/xhtmlでサイトを作ったのですが、 (教則本がIE7以降対応だった為) safari firefoxd IE7では表示がうまくいくのですが、 IE6では全くcssが適用されないです。 少し調べたところこの辺の記述に問題があるのかなと思っています。 誰か教えて下さい。 ............................................................................... <!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="jap" lang="jap" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> ....................................................................

    • ベストアンサー
    • HTML

専門家に質問してみよう