ＩＥだと左側に赤い中のテーブルが寄ってしまう

解決済

質問者：GRIDKWBKMYD
質問日時：2014/01/25 13:29
回答数：2件

http://oshiete.coneco.net/qa8437703.html
こちらで質問してご回答いただいてタグを修正したのですが、
なぜかIE以外のブラウザなら、中のテーブルが中央に表示されるのに
ＩＥは左側に赤い中のテーブルが寄ってしまいます。

対応方法を教えてください。

コードは

<html>
<head>
<title>test</title>

<style type="text/css">

#zentai{
width: 850px;
margin: 0 auto;
text-align: left;
background-color:red;
}

</style>

</head>
<body>
<div id="zentai">

test

</div>

</body>
</html>

です。

通報する

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

質問の本文を隠す

回答 (2件)

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2014/01/25 15:11

すでに回答しましたが・・それでIE7以降は改善されるはずですけど・・

⇒Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
・DOCTYPE宣言がない!!　これが最初に忠告されるはず・・

★ちゃんとDOCTYPE宣言をしましょう。
　そのときに、必ずstrictにして置きます。
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　IEは、かって他のブラウザを蹴落とすために独自仕様でした(そのためIE用に作られたページ以外は崩れる)
　古いIE用を表示させる互換モー時を持っているた、IEに対して標準モードで動作させるように宣言する必要がある。
　対症療法な対処ではなく、きちんと対処しないとブラウザ間の誤差に随所で悩まされる

★body直下にtableはありえません。
　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
　tableは二次元データをあらわすもので、配置やデザインのためではありません。
※これは、最低限守らないと!!!

[サンプル]
★HTML4.01strict + CSS2.1
★タブは＿に置換してあるので戻す。

<!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">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<table summary="サンプル">
＿＿＿<tr>
＿＿＿＿<td>セル</td>
＿＿＿</tr>
＿＿</table>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。

通報する

お礼日時：2014/02/15 18:37

No.1

回答者： kita-neko
回答日時：2014/01/25 14:41

IEのバージョンにもよりますが、margin:autoが使えないことがあります。

以下の方法であればIEでも中央に寄せれます。

<html>
<head>
<title>test</title>

<style type="text/css">
body{
width:100%;
text-align:center;
}
#zentai{
width: 850px;
margin: 0 auto;
text-align: left;
background-color:red;
}

</style>

</head>
<body>
<div id="zentai">

test

</div>

</body>
</html>