IE10以降のCSSハックについて
- IE9で表示位置がズレる項目があり、それを正そうと、IE9のCSSハックを記述してIE9では正しい位置に表示されるようになったが、IE10以上でもそのハックを読み込んで逆にIE10以上で表示位置がズレる問題が発生した。
- IE10以上の表示位置を正すために、IE10と11に対して別のCSSハックを記述したが、うまく機能せず、正しい記述方法がわからない状況にある。
- 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ハックとメディアタイプの関係を理解できておらず、上記の記述で何をしようとしているのか全くわかっていません。ネットに落ちていたのを真似て書いているだけの状態です。 そこでお願いなのですが、上記の記述が間違っているなら正しい記述の仕方をご教授ください。どうか、宜しくお願い致します。
- akitugu4
- お礼率0% (0/2)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .sample:not(:target) { top: 0.5em; } } この部分は、CSS（Mediaqueries）では？・・・ Hackは下記のようにかくのでは？・・・ <!--[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)]> <![endif]-->
その他の回答 (1)
- kawais070
- ベストアンサー率52% (2242/4282)
CSSハックはIE9用のみにして、IE10～11をIE9互換モードで動作させればよいかなと思います。 htmlファイルの<head>内に、以下のタグを書き込むと、IE9互換モードで動作します。 <meta http-equiv="X-UA-Compatible" content="IE=9"/>
関連するQ&A
- 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
- CSSハックについて・・・
ホームページを作っていて、IEではちゃんと表示されるのですが、 FirefoxとOperaでは思い通りに表示されません。 これをどうにかしたいと思います。 前に、どこかのサイトでCSSハックという言葉を見たことがあるのですが、主にFirefoxに、CSSハックを利用したいです。 Firefoxのみ、またはFirefoxを含む様々なCSSハックの方法を教えてください！ 今は、OperaよりもFirefoxを優先してほしいです。
- ベストアンサー
- HTML
- IE7だけに適用するCSSハックの記述形式？
はじめまして。 社内のWeb関連を任されたばかりのものです。 「IE7だけに適用するCSSハックの記述形式」 を表記してくださいという指示があったのですが 何のことかさっぱり分かりません。。。 CSSハックについて、またIE7にだけ適用できるものについて 教えていただけませんでしょうか？ 何とぞ宜しくお願い致します。
- ベストアンサー
- CSS
- 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ハックについて
現在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
- 以下のcss(css ハック？)を解説していただけませんか？
以下のcss(css ハック？)を解説していただけませんか？ 以下のようなcssの記述をみつけたのですが、意味がさっぱりです。 @media tty { i{content:"\";/*" "*/}}@m; @import '/css/cmm/ie55win3.css'; /*"; } }/* */ なお、 ●tty というmediaは、「固定幅の文字グリッドを用いたメディア、例えば、テレタイプ、端末、表示能力に制限のある携帯デバイスなどを示す。このメディアでは、画素単位 px は使えない。」ということ。 ●@media 規則 ⇒ 「@import と似たようなものに、 @media があります。これを用いると、一つのスタイルシートに、複数のメディアタイプに対する規則を記述することが出来ます。」 ということは分かっています。 ですが、それをわかっていても、上のcssの記述の意味がわかりません。 以上、よろしくお願いいたします。
- ベストアンサー
- HTML
- IE6に対応させたcssハックについて
cssベースでHPを構築しています。 ヘッダー、そしてメインブロックの中にレフトボックス、 ライトボックスを入れた２カラムです。 レフトボックスとライトボックスはフロートで調整しています。 ブロックにフロートを使うとIE6でマージンオートが適用されないという 話を聞き確認してみたところ、確かにIE7,ファイアーフォックスでは きちんと背景の真ん中にコンテンツが表示されているのですが、 IE6で見てみるとズレが生じています。 マージンオートが適用されず、左側にヘッダー、メインボックス全て くっついている状態です。 ハックを使うことがポイントのようなのですが、 IE6用にどのようにスタイルシートに記述すれば宜しいでしょうか？？ IE6しか読み込まない子供セレクタを使うというものもありましたが px指定してもパソコンの画面サイズでずれが生じるといったことは ないでしょうか？ cssに詳しい方宜しくお願い致します。
- 締切済み
- HTML
- このCSSハックはどういう意味合いのものでしょうか？
すみません、似たような質問を。 http://oshiete1.goo.ne.jp/qa4177163.html でして、締め切ってしまったのですが、よく見ると１００％は理解できませんです。 そして、その質問と同じ構造のCSSなのですが・・・。 以下は、どのようなCSS-hackなのでしょうか？ ==知っていること========================================= ●スターハック： セレクタの前に【* html】をつける。（半角スペースも忘れずに） IE4～6、MacIE4～5以下にのみ適用させる。Validator（※仕様に準拠しているかチェックしてくれるもの）に通る。 ⇒2行目はこれを用いている ●（名称不明） プロパティに続けて半角スペースと/**/を入れるとIE6には適用されない。 Validatorに通る。 ⇒５行目のこれは、このハックに該当するのでしょうか？ それとも、プロパティ（1px）のあとに「;」と「改行」と「}」と「もういっかい改行」があるので、該当しないのでしょうか？ 該当しないとしたら、なんのためにあるのでしょうか？ ========================================================= ★それから疑問が１つあります 1行目の「/*\*/」はどのような意味なのでしょうか？ これも、css ハックの一部なのでしゅうか？ 以上、よろしくお願いいたします。 ------------------------------------------------------------- （以下、説明しかすいようにと行番号をふっています） 1: /*\*/ 2: * html .container, * html .minwidth, * html .box { 3: height: 1px; 4: } 5: /**/
- ベストアンサー
- HTML
- CSSをIEが読み込んでくれません。
CSSをつかってページを作りました。 Firefoxでは、表示は問題なかったのですが、 IE６・７でCSSを読み込んでくれません。 IEのバグなのでしょうか？それともCSSの記述間違いなのでしょうか？ どなたか修正方法を教えて頂ければと思います。 よろしくお願い致します。
- 締切済み
- CSS
