IE6.0とIE7の表示差問題について

前へ 次へ
このQ&Aのポイント
  • なぜ文書型宣言をすることで表示が改善されるのでしょうか。
  • IE6.0のCSSハックは、IE6.0のブラウザがwidth:autoをうまく表示しないから仕方なくこう記述するのであって、文書型宣言をしたことで、どうにかなる問題ではないと思います。
  • 実際必要なのは文書型宣言ではなくて、IE6.0にも7.0にも対応できるスタイルシートの書き方ではないでしょうか。
回答を見る
  • ベストアンサー

IE6.0とIE7の表示差問題について

http://trendy.nikkeibp.co.jp/article/col/20060516/116681/ ここのサイトを見たんですが、IE7でレイアウトがくずれてたページが 文書型宣言したらうまく表示されたと書いてあります。 しかし、なぜ文書型宣言をすることで表示が改善されるのでしょうか。 IE6.0のCSSハック(_width:100%など)は、IE6.0のブラウザがwidth:autoをうまく表示しないから仕方なくこう記述するのであって、 文書型宣言をしたことで、どうにかなる問題ではないと思います。 実際必要なのは文書型宣言ではなくて、IE6.0にも7.0にも対応できる スタイルシートの書き方ではないでしょうか。 なぜ文書型宣言をすることでIE6.0とIE7.0の表示がよくなるのか 教えてください。 説明がわかりづらくてすみません。

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

  • ベストアンサー
  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

文書型宣言があると「動作モード」というのが変化するんだよ。 IE6とIE7では勿論どっちのモードでも描画の仕方が違うんだけど他のブラウザでもやっぱりそういうのがあって、それが違うと領域の「幅の計算の仕方」が変わる。 width:100px と指定してborder:1px;margin:4pxなんてしてあるとその領域がどのくらいの大きさになるのか、という計算が実は一々違う。 その計算の仕方が違うためにレイアウトが崩れるページが少なくない。 それを有る程度同じような計算の仕方に統一できたら、崩れにくくなると思わない？ そういうカラクリ

red_bang
質問者

お礼

>その計算の仕方が違うためにレイアウトが崩れるページが少なくない。 >それを有る程度同じような計算の仕方に統一できたら、崩れにくくなると思わない？ ここの部分がとてもわかりやすかったです。 文書型宣言は、WEBページを作るうえで基本中の基本だなって思えました。 しかし、IE6.0と7でうまく表示させるには文書型宣言だけはできない気がします。 IE6.0のwidth:autoが表示できないバグにCSSハックしてIE6.0でちゃんと見れたところで、IE7ではハックした部分が弾かれてうまく見れなかったり。 両方のブラウザでちゃんと見れるスタイルシートの書き方があると思うんですが、その点もよかったらアドバイスいただきたいです。

  1. カテゴリ
  2. インターネット・Webサービス
  3. ブラウザ

関連する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ハックで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
  • どう変更してもＩＥ６だけＣＳＳレイアウトが崩れてしまいます。

    ＣＳＳレイアウトで、サイトを作成していたのですが、 最近になってＩＥ６で確認してみると、レイアウトが崩れまくっていました。。。 ３カラムレイアウトなのですが、Ｆｉｒｅｆｏｘ等他のブラウザではきちんと表示されるので、なぜかＩＥ６だけ縦１列になってしまいます。。 こちらのサイトでもＩＥ６はレイアウトが崩れやすいという情報がたくさんあり、そちらのアドバイスを参考にしながら１日かけてがんばってのですが、できませんでした。もう限界です（涙） 現在のＣＳＳは、 * { margin:0; padding:0; } .wrapper { width: 740px; margin: 0 auto; } .header { width: 740px; } .main { width: 740 px; /* 両端ブロックとコンテンツを囲んでいるクラスです。 */ } .menu {display: inline; float: left; width: 205px; } .contents {display: inline; float: left; width: 385px; } .affiliate {display: inline; float: left; width: 150px; } .footer { clear: both; width: 740px; } というような状態です。 どなたかアドバイスいただけますと大変幸いです。 よろしくお願いいたします。

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

  • IE6.0のバグ

    いつもお世話になっております。 IE6.0のブラウザでの表示についてお願いします。 htmlと外部cssでレイアウトしているのですが、 IE6.0の表示だけがずれてしまいます。 #hr 　{ 　position: relative; 　width: 700px; 　height: 5px; 　background-color: #000000; 　margin: 3px 0px 0px 0px; 　border-style: none; 　padding: 0; 　} を指定してある<hr>がうまくいきません。 <hr>の上下に空白(幅)ができてしまいます。 いろいろ検索して対処法を考えたのですが、 どれもうまくいきませんでした。 どなたかわかる方、宜しくお願い致します。

  • CSSハック一覧 – IE, Firefox, S

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

    • ベストアンサー
    • CSS
  • バージョンの異なるIEのCSSについて

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

  • ＩＥ６と他のブラウザの表示の違いの対処法

    現在DreamweaverでＨＰ作成中の初心者です。 私はIE7とFirefoxのブラウザで確認をしていて問題なかったんですが、IE6のブラウザを使用している人にズレていると指摘をもらいました。こちらの教えてgooでもブラウザによって表示が変わってしまうなどの質問を見て、cssを振り分けたりIEハックを使うと良いということはわかりました。 私はcssを分けて作成してみようと思ったんですが、すべてのcssを分けるべきなのか？それとも原因のあるところだけを別のcssで作成するほうが良いのか教えていただけませんでしょうか？ 色々読んでは見たものの私にはなかなか理解できなくて困ってます。 もし親切な方がおられましたら初心者な私でもわかるように対処法を教えていただけないでしょうか？ よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • IE７の表示崩れを直したい

    CMSでCSSを使ってサイトを作成するにあたり、IE7だけ表示が崩れてしまうのですが、何が原因で崩れてしまうのかがわかりません。 IE6、IE8、Firefox、Opera、Safariともに表示が崩れないのですが、これはIE7単体のバグなのでしょうか？ ・サイトURL http://www.tantanmen.com/site/index.html ・CMSは、SOY-CMSを使っています。 おそらくは、大きな画像部分のCSSの記述の問題化と思うのですが、このように記述しております。 /*トップイメージの設定*/ #top_image { width: 1000px; height: 528px; clear: both; width: 1000px; height: 528px; padding: 0; background: url("img/top_image01.jpg") 0 0 no-repeat scroll; text-indent: -9999px; display: block; } どうぞ、よろしくお願いいたします！

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する