- 締切済み
IEでWEBサイトのデザインが崩れる
先日初めてWordpressのテーマを自作してWEB上にアップしました。 Firefoxでアップしたサイトを確認したところ無事表示されていたのですが、手持ちのIE9で確認したところデザインが崩れていました。。。 HTML,CSSともに初心者で、どうすればIEでレイアウトがちゃんと表示されるのかわからず困っています。 ここを直すとちゃんと表示されるよ～的なことを教えていただけるとありがたいです。 問題のサイト→http://webseisaku-idea.net/
- みんなの回答 （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.} 健闘を祈る！
