- 締切済み
IEでWEBサイトのデザインが崩れる
先日初めてWordpressのテーマを自作してWEB上にアップしました。 Firefoxでアップしたサイトを確認したところ無事表示されていたのですが、手持ちのIE9で確認したところデザインが崩れていました。。。 HTML,CSSともに初心者で、どうすればIEでレイアウトがちゃんと表示されるのかわからず困っています。 ここを直すとちゃんと表示されるよ～的なことを教えていただけるとありがたいです。 問題のサイト→http://webseisaku-idea.net/
- nao1800
- お礼率50% (2/4)
- ブログ
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- まゆ（@pop1001）
- ベストアンサー率35% (19/54)
まず、 •余白にはmarginではなく、paddingを使用する。 •floatの使いすぎに注意。 •overflow: hiddenは背景が見えてもおかしくないように。 上記３点を確認して下さい。 次に、 条件付きコメントを使用し、<html>にクラスを与えます。これは巧い方法で、且つvalidエラーもありません。 <!--[if IE 9 ]> <html class="ie9"> <![endif]--> そして最後に１点、 サイトが左配置になっていたので中央配置にするのはどうでしょうか？ HTML 1.<div class="main"> 2. <div> 3. <h2>ブロックレベル要素をセンタリング</h2> 4. <p>ブロックレベル要素</p> 5. </div> 6.</div> CSS 1..main { 2. width: 100%; 3. border: 1px solid #000; 4.} 5..main div { 6. width: 80%; 7. border: 1px solid #FF0000; 8. margin: 0 auto; 9.} センターリングしたい要素に「margin: 0 auto;」と指定するのが正しい方法です。 ※上記ソースでborderを使っているのは分かりやすくする為だけです。 サイト全体を中央配置にする方法↓ HTML 1.<body> 2.<div id="wrapper"> 3.<h1>サイト全体を中央に配置にする</h1> 4.<p>サイト全体を中央に配置にする為のテキスト</p> 5.<!--/ #wrapper--></div> 6.</body> CSS 1.body { 2. text-align: center; 3.} 4.div#wrapper { 5. width: 800px; 6. margin: 0 auto; 7. text-align: left; 8. border: 1px solid #FF0000; 9.} 健闘を祈る！
関連するQ&A
- cssで指定した文字の大きさがIE6とIE7で違う
cssでレイアウトを指定したサイトを作りました。 IE6、Opera9、Firefox2でうまく表示ができました（微妙にFirefoxだけ文字の大きさが小さいですが、ほぼレイアウトにあっています）。 が、先日IE7で確認するとフォントサイズが大きくなっていました。 cssではfont-sizeを、bodyが12px、各id、classはそれぞれ11px、10pxとしました。 IE7だと13pxくらいに見えてしまい、レイアウトをはみ出て表示されています。 IE7をIE6と同じフォントサイズにするにはどのように指定すればよいのでしょうか？ ちなみに文字の大きさは固定でブラウザで大きさを変更できないようにしたいのです。 すみませんがよろしくお願いします。
- 締切済み
- HTML
- IE8でのレイアウト崩れ
FireFoxでCSSを確認してレイアウトが問題なかったのですが、IE８で表示すると、とんでもない崩れが生じてしまいます。 CSSの解釈が違うのでしょうか？ いろいろ調べましたが訳が分かりません。 教えてください。
- ベストアンサー
- HTML
- サイトの表示がIE6とIE7で違っていて困っています。
自分で作成したHTMLサイトの表示がIE7とIE6で表示が違っていて困っています。ＣＳＳの問題だと思うのですが、IE6で確認すると、ヘッダ部分とフッタ部分がどうしてもずれて表示されてしまいます。 どなたかお知恵を貸して下さい。 よろしくお願いします。
- 締切済み
- HTML
- XPのパソコンだとwebサイトレイアウトがずれる
こちらのサイト http://baseballclubsnakes.web.fc2.com/ OSがXPだと表示レイアウトがずれます。（IE、Firefox） vista、７だときれいに表示される（IE、Firefox、safari、chrome すべてOK）のですが原因が分かる方いましたら教えてください。 HTMLの書き方なのでしょうか？ 教えてください。
- 締切済み
- Windows XP
- IEでのみ表示がおかしい
wordpressにてサイトを制作中です。 あるプラグインを導入して、そのプラグインのCSSを触っているとなぜかトップページのみレイアウトが崩れました。プラグインを導入していたのはサイドバーで、表示がおかしくなったのはサイドバーのこのプラグインの真下の項目と、プラグインとは関係の無いトップページの項目です。 プラグインを削除してもダメ、IEをアンインストールしてもダメ、Firefox、safariでは問題なく表示されています。 おかしくなったのは、query_postにて新着を表示している「新着情報」欄が続けて２つ表示されてしまっているのと、もう一つは横並びにCSSでレイアウトしていたのがガタガタになっています。これもquery_postにてカスタムポストタイプを表示しています。 Wordprerssに関わらず、IEでのみレイアウトが崩れる といった事例に対して他に可能性のあることはないでしょうか。 とても困っています。よろしくお願い致します。
- ベストアンサー
- CSS
- IEとファイヤーフォックスでのレイアウト違い
外部CSSにてレイアウト組んだのですがIE７とファイヤーフォックスで微妙に違うレイアウトになってしまいます。。 IEですとメインフラッシュの横に１ｐｘ程度の白い空白ができてしまいます。 正しくはファイヤーフォックスのように空白がない というようにIEでも表示させたいのですが・・・・。 どなたかお力添えいただけると幸です。。 http://studio-evah.com/test/ cssは http://studio-evah.com/test/css/css.css です。 よろしくお願いします。
- ベストアンサー
- HTML
- ローカルにある .php が IE で表示できない
PC を買い換えてからこうなりました。 WindwsXP HomeEdition SP2 で、IE は Ver.6 です。 自分のホームページを .php で作っていて、 .php がローカルにある状態で、IE でのページレイアウトを確認しようとします。 しかし、このファイルをどう処理するか、のようなメッセージ BOX が出てしまい、 「開く」「保存」「キャンセル」の選択となります。 そして「開く」を選択すると、Firefox が起動してそれで開いてしまうので、IE での表示確認ができません。 同じファイルでも、サーバにアップすれば IE で開いて表示する事ができます。 また、別の PC であればローカルでも IE で表示させる事ができます。 サーバにアップして表示確認すればまあいいのですが、 アップ前の仮状態なので、ローカルでチェックしながら、という作り方が出来ないのが面倒です。 どうしたらローカルの .php ファイルを IE で表示できるでしょうか。 （phpプログラムの動作確認ではありません。HTML や CSS の確認です） 他の PC では何も考えずに出来ていた事なので、対処方法がよくわからず； ・・初歩的な気はするのですが、アドバイスがあればお願いしたいです。
- 締切済み
- Windows系OS
- IEだけ外部CSSを読み込まない
こんばんは。 レスポンシブサイトを製作中なのですがIEだけが外部CSSを読み込みません。 Chrome、Firefox、Opera、Safariなどのモダンブラウザは異常なく読み込みます。 IEに限ってどのバージョン（少なくとも８～11）もCSSを読み込まずHTMLだけのレイアウトです。 考えられる原因は何だと思われますでしょうか？ モノをあげられないので推測での話になると思うのですが、よろしくお願い致します。
- 締切済み
- CSS
- IE7でだけ作ったメニューが表示されません。
サイトを作っているのですが、IE7でだけHOMEやImageなどのメニューが表示されません。safari,firefox,operaでは表示されました。 どうしたら表示できるのでしょうか？ またここはこうした方がいいなどHTML,CSSのアドバイスなどもして頂けるとうれしいです。 よろしくお願いします。
- ベストアンサー
- HTML
- IE8は切り捨てても構わないのか
Chrome、FireFox、IE8でレイアウトの調整をしています。 驚いたのはIE8がChrome等と比べて表示がおかしくなる点です。 例えば<h1>や<h2>でCSSで記述しているのに大きくなります。 その結果、横スクロールが出てきてしまいます。。。 ChromeやFireFoxは概ねイメージした通りに表示してくれます。 これはIE8の特性と思って諦めるよりないのでしょうか。 なお、当方にIE９の環境がないため、こちらは未調査です。
- ベストアンサー
- HTML
