こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

IEでWEBサイトのデザインが崩れる

先日初めてWordpressのテーマを自作してWEB上にアップしました。
Firefoxでアップしたサイトを確認したところ無事表示されていたのですが、手持ちのIE9で確認したところデザインが崩れていました。。。

HTML,CSSともに初心者で、どうすればIEでレイアウトがちゃんと表示されるのかわからず困っています。
ここを直すとちゃんと表示されるよ~的なことを教えていただけるとありがたいです。

問題のサイト→http://webseisaku-idea.net/

投稿日時 - 2012-10-22 18:45:32

QNo.7761152

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

まず、
•余白にはmarginではなく、paddingを使用する。
•floatの使いすぎに注意。
•overflow: hiddenは背景が見えてもおかしくないように。
上記3点を確認して下さい。

次に、
条件付きコメントを使用し、<html>にクラスを与えます。これは巧い方法で、且つvalidエラーもありません。
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->

そして最後に1点、
サイトが左配置になっていたので中央配置にするのはどうでしょうか?
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.}


健闘を祈る!

投稿日時 - 2012-10-22 20:05:57

あなたにオススメの質問