• ベストアンサー

CSSハックについて・・・

ホームページを作っていて、IEではちゃんと表示されるのですが、 FirefoxとOperaでは思い通りに表示されません。 これをどうにかしたいと思います。 前に、どこかのサイトでCSSハックという言葉を見たことがあるのですが、主にFirefoxに、CSSハックを利用したいです。 Firefoxのみ、またはFirefoxを含む様々なCSSハックの方法を教えてください！ 今は、OperaよりもFirefoxを優先してほしいです。

  • HTML
  • 回答数2
  • ありがとう数6

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

  • ベストアンサー
  • Questa
  • ベストアンサー率48% (13/27)
回答No.1

CSSハックとは、ブラウザのバグを利用して強引にCSSを適用する技法のことです。 したがって、Firefox、Operaなどバグの少ない新しいブラウザで、この技を使うことは困難です。 ネット上に多くのCSSハック解説記事がありますが、たいていはIEをターゲットにしているようです。 大変かもしれませんが、Firefoxで意図通りの表示を実現し、その上でIEに対してCSSハックをかけるのが近道だと思います。 ※ もちろん、CSSハック不要のデザインにするのが一番賢明です。

参考URL：
http://oscarblog.net/archives/000348.php

その他の回答 (1)

  • taba
  • ベストアンサー率61% (349/567)
回答No.2

ちょっと記憶が曖昧なんですが、IEではCSSの仕様通りだが、firefox（geckoエンジン）では仕様通りに動作しないという例もあったような記憶があります。ただ、ほとんどの場合、firefoxのほうが仕様に忠実で、曖昧な記述を認めません。また、IEは独自仕様が多いです。 　なので「IEでは正しく動作するがfirefoxでは動作しない」としたら、HTML・CSSの記述が間違っている（仕様通りではない）か、IEでしか動作しない独自のタグ等を使っている可能性が非常に高いでしょう。 　#1の方の書かれているとおり、まずは記述を見直して、firefox普通に表示できるようにしてみてください。

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

関連するQ&A

  • CSSハックの使い方を教えてください

    CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・ そこで、この際CSSハックを使おうと思っています。 といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・ など個別のブラウザに異なったCSSを指定することができるのでしょうか？ 実際の記述方法を教えていただけないでしょうか？ 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・ ちなみに、この現象のほかの解決方法ってあるのでしょうか？ #wrapper{ position:relative; width:870px; margin:0px auto; text-align:left; } #foot{ position:relative; width:100%; height:auto; clear:both; }

    • ベストアンサー
    • HTML
  • cssの今、一番旬なブラウザごとに違うcssをかける方法

    現在４つのブラウザでほぼ同じような動作・見栄えをするサイトを制作しております。 ４つのブラウザとは（opera ie6 ie7 firefox）です。 そこで、現在、ie6だけで生じる表示崩れがあり、 そのcssの解決方法も発見したのですが、 それを解決すると今度は逆に、opera,ie7,firefoxでエラーが起きてしまいます。 読み込んでいるのは、一つの外部cssファイル、main.cssです。 現在考えられる解決方法としては、 １．ie6だけにcssを掛けるハック？ 　この場合、どのようにハックをかければいいのでしょうか。 　色々しらべましたが、スターハックなど、現在使って良いハックというのは何になるのでしょうか。 具体的なcssコードは、以下です。 #pull a:hover{ display:block; /*以下ie6だけに指示したい命令　現状コメントアウトしています*/ /*margin-bottom:-20px;*/ } ２.ie6だけ別の外部cssファイルを読み込ませる。 　ブラウザ毎に違うcssファイルを読み込ませることってできるのでしょうか。 　（javascriptで判別するのでしょうか？） ie6　なら、main_ie6.cssを読み込み、 それ以外のブラウザなら main.cssを読み込ませる 一番ベストな方法を教えていただければと思います。

    • ベストアンサー
    • HTML
  • CSSハック一覧 – IE, Firefox, S

    CSSハック一覧 – IE, Firefox, Safariなどなど。 CSSハックはどのように記述するのですか？

    • ベストアンサー
    • CSS
  • Operaでの表示がおかしい（CSSハック）

    あるサイトをWebデザインしているのですが、F5キーを押せばOperaでの表示がおかしくなります。 色々CSSファイルとかを自分なりに見て解決法を試行錯誤したのですが、自力では限界になって投稿させて頂きました。 ■　問題の内容 ・　表示がおかしいブラウザはOperaに特定される。 ・　環境はHTML5・CSS（外部ファイル）・JQuery（外部ファイル） ・　Operaで最初に表示させた時はローカル・Webとも通常表示されるが、そのサイトをＦ５（更新）キーで押した時、サーバーアップ時のみレイアウトが崩れる（ローカル（Windows）上の同ファイルをOperaで開いた時及びＦ５キーを押した場合は、両方とも表示崩れが起きない）。 ・　レイアウト崩れは特定の部分のみ。 ・　お客様のサイト、自社でテストでアップしたサイトの両方のサーバー（別会社）とも全く同じ現象が起きる。 ・　通常表示時に別サイトに行き、リンクや戻るボタンで戻った時は、上記崩れは起きていない。 ・　Opera以外のブラウザ（試しているのはOperaのほか、IE・Firefox・Chome・Safari）では上記現象は一切発生しない。 通常のOperaのCSSハックをすれば解決するっていう感じでは無さそうですし。 解決策は何かありませんでしょうか。 よろしくお願いいたします。

  • バージョンの異なるIEのCSSについて

    ホームページのデザインをCSSハックを利用してIE6、IE7に対応させているのですがIE8にも対応させたいと思っています これを機にCSSハックではなくバージョンの異なるIEに共通するスタイルシートをつくりたいと思っているのですが、これを実現するためにはCSSの初期化という方法がいいのでしょうか？ 参考になるサイトなどでも結構ですので、アドバイスをお願いいたします

  • IE10以降のCSSハックについて

    はじめまして、いろいろ探し回ったのですが、行き詰ってしまいました。 みな様のお力をお借りしたく、こちらを利用させて頂きます。 IE9で表示位置がズレる項目があり、それを正そうと、IE9のCSSハックを記述してIE9では正しい位置に表示されるようになったのですが、今度はIE10以上でもそのハックを読み込んで逆にIE10以上で表示位置がズレるようになってしまいました。 ここまではネットでも書かれてるようにIEの仕様？ということでまだ分かるのですが、 今度はIE10以上の表示位置を正すためにIE10以上に読み込ませるCSSハックを下記のように記述しました。ですが、IE10、11共に読み込んでくれませんでした。 -------------------------------------------------- /* IE9 */ .sample:not(:target) { top: -0.3em\9; } /* IE10,11 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .sample:not(:target) { top: 0.5em; } } -------------------------------------------------- 私自身、CSSハックとメディアタイプの関係を理解できておらず、上記の記述で何をしようとしているのか全くわかっていません。ネットに落ちていたのを真似て書いているだけの状態です。 そこでお願いなのですが、上記の記述が間違っているなら正しい記述の仕方をご教授ください。どうか、宜しくお願い致します。

    • ベストアンサー
    • CSS
  • 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
  • cssハックを勉強中で、使い方について質問です。

    現在cssハックを勉強中です。 あるサイトで調べるとoperaだけに使う場合 *+html:first-child p { /* for Opera */ line-height : 150%; } このように表示されてました。 IE4-IE6のアンダースコアハックの使い方は分かったのですが 上記のcssハックは今ひとつ使い方が分かりません。 例えば下記のcssがあったとして ul.piyo{ margin:0 0 10px 0; } ul.piyo li{ margin:0; } ul.piyo li.hoge a { width:100px; height:10px; display:block; padding:0; margin:0; background:url(../img/hoge.gif) ; } ul.piyo li.hoge a:hover { background-position:0 -18px; } ...以下、hoge2、hoge３と同じ<li>のcssが続く。 各hoge、hoge2、hoge3の下部分にoperaだけmargin10pxをつけたい場合 *+html:first-child li.hoge { /* for Opera */ margin:0 0 10px 0; } このように表記し、hoge2、hoge3と付け足せばいいのでしょうか？ 説明下手で申し訳ありません。 分かりづらいところは補足いたしますのでどうぞご回答よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • cssハックについて

    現在Safariに対してcssハックを適用させようとしているのですが、 そのハックがなぜか他ブラウザにまで影響してしまいます… （Firefox、Operaなど。IEは大丈夫です） なぜ他ブラウザにまで影響してしまうのかが判らないので、 教えて頂けると嬉しいです。 宜しくお願いします。 htmlに対するcss読み込みの記述--------- <link rel="stylesheet" type="text/css" href="css/importtop.css" /> importtop.css内の記述--------- /* For Specific Browsers */ @import "safari.css"; safari.css内の記述--------------- /* Safari4 */ body:first-of-type #content { height: 635px; } body:first-of-type #container { height: 635px; } body:first-of-type #sidebar { height: 635px; } body:first-of-type #content { height: 635px; } body:first-of-type .sbar { height: 635px; } /* Safari3 */ html:not(:only-child:only-child) #container { height: 635px; } html:not(:only-child:only-child) #content { height: 635px; } html:not(:only-child:only-child) #sidebar { height: 635px; } html:not(:only-child:only-child) .sbar { height: 635px; }

    • 締切済み
    • 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>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する