アプリ版：「スタンプのみでお礼する」機能のリリースについて

IEとFireFoxでCSSの見た目をそろえたい

解決済

  • 質問者：shion0409
  • 質問日時：
  • 回答数：2件

CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが
完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。

足し算はあっているはずなのですがどこを修正すればよいのでしょうか？

HTML
<body>
<div id="wrapper">
<div id="container">
<div class="header">
<h1></h1>
</div>
<div class="kaijyo"></div>
<div class="main">
<div></div>
<h2></h2>
<div class="kaijyo"></div>
<div class="line">
<hr>
</div>
</div>
<div class="menu"> </div>
<div class="kaijyo"></div>
<div class="footer">
<p> </p>
</div>
</div>
</div>
</body>


CSS
#wrapper{
text-align:center; /*IE対応*/
}
#container {
width: 980px;
margin-left:auto;
margin-right:auto;
background-color:#CAB59B;
text-align:left;
}
.header{
width: 970px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
background-color:#6F0011;
color:#000000;
text-align:left;
height:20px;
}
.main{
width: 670px;
float: left;
margin: 0px 0px 0px 0px;
padding: 10px 15px 10px 15px;
background-color:#E4E4E4;
text-align:left;
}
.menu{
width: 260px;
float: left;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
background-color:#CAB59B;
text-align:left;
}
.footer{
width: 970px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
background-color:#6F0011;
color:#FFFFFF;
text-align:left;
}
.kaijyo{
clear: left;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

W3C CSS 検証サービス(

http://jigsaw.w3.org/css-validator/#validate_by_ … )に書かれているように、
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.』
なのです。
　スタイルシートを導入する前にHTMLをきちんと書けるようにならないと、必ずそのような問題で悩まされることになります。
　必要ないので、詳しい説明は省きますから、おいおい学んでください。
[原因]
　IEは長く独自仕様でユーザーを囲い込んでいたため、ウェブ標準とは異なる解釈をする古いIE用の互換モードを持っています。IEであっても標準モードで動作するようにHTMLを記述すれば、多くの問題は解決します。IEがウェブ標準に方針変更をしたことから、互換モードに対する対応は不要になるでしょう。

[対策]
　HTMLをIEであっても標準モードで動作するDOCTYPEで作成しましょう。いくつかのDOCTYPEがありますが、HTML5の勧告が近いことを考えると、HTML4.01strictで記述するほうが良いでしょう。
　すなわち、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
　と言う記述が良いでしょう。
　⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml )

[HTML4.01strict]
　1999年のHTML4.01の勧告以来!!!「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」とされてきました。
　HTML4.01strictでは、文書構造をHTMLで記述し、その文書構造に基づいてプレゼンテーションをスタイルシートで指定することになりました。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
★DIVは、HTM5では原則として使わなくなります。その理由はHTML5では「文書構造を示すために新しい要素が追加された」からです。HTML4.01では、
・ヘッダ,本文,フッタをもつような完結した記事は、<div class="article"></div>
・文書のヘッダにあたる部分は<div class="header"></div>
・本文は<div class="section"></div>
・ナビゲーションは<div class="nav"></div>
　のようにマークアップしなければなりませんでしたが!!HTML5では<heade><section><nav>などが導入されます。
　⇒新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
　当然ですが、wrapperとかcontainer、kaijyo、mainのようなclass名ID名は、？？？です。

【サンプル】
　こんな簡単なHTMLとスタイルシートで実現できるはずです。それでいてリキッドデザインですから、スマホのような小さなディスプレイでも超幅広ディスプレイでも利用できるはずです。
　サイズ計算なんてほとんどしなくて良いですし、ブラウザ間の表示誤差も考えなくて良い。(ＩＥ６以前は除く)

・Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )のDATA入力(右上)で、チェック済みのHTML4.01strict + CSS2.1です。
・<div class="section"></div>→<section></section>などとするだけでHTML5になります。
　class名やid名をつける参考に
★タブは＿に置換してあるので戻す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
div.header,div.section,div.footer{
width:90%;min-width:640px;max-width:1000px;/* 幅を固定したけりゃwidth:960px; */
margin:0 auto;
padding:5px 10px;
}
div.section{
position:relative;
min-height:300px;
}
div.section h2,div.section div.section{
margin-right:260px;/* 右側をあけておく */
}
div.section div.section{
width:auto;min-width:0;/* 上書きして */
}
div.section div.nav{
position:absolute;
width:260px;
height:100%;
right:0;top:0;
}
/* ここまで・・以下は分かりやすいように色づけ */
body{background-color:gray;}
div.header{background-color:aqua;}
div.section{background-color:white;}
div.section div.section{background-color:silver;}
div.section div.nav{background-color:lime;}
div.footer{background-color:yellow;}

-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<div class="section">
＿＿＿<h3>見出し</h3>
＿＿＿<p>ブロック配置にfloatを使用していないので、記事内でfloatやclearが自在に使える。</p>
＿＿＿<p>HTMLは誰(googleなどの機械も)が読んでも構造が分かる。書くのも楽・・。当然スタイルシートも簡単になる。</p>
＿＿</div>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li>トップ</li>
＿＿＿＿<li>著書</li>
＿＿＿＿<li>自己紹介</li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

DOCTYPEを変えるだけで正しく動くなんてびっくりです。
今までは呪文のように書いていただけでした。
ありがとうございます。

通報する
お礼日時：2013/08/24 18:39

No.1

  • 回答者： metametamu
  • 回答日時：

とりあえずDOCTYPE宣言を指定するのが先ではないかと。


xhtml1.0 strictが個人的にはオススメです。

その後でバグつぶしですね。方法は
http://adp.daa.jp/web.html

気のせいでなければkaijyoというclassを与えられているdiv要素の中身は空白ではないですか？
もしそうであればクリアするだけのための要素は不要なので、html的にはこっちで書く方がいいかと。

■元ソース
<div class="kaijyo"></div>
<div class="footer">

↓

■修正後
<div class="footer kaijyo">
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報