http://oshiete.coneco.net/qa8437703.html
こちらで質問してご回答いただいてタグを修正したのですが、
なぜかIE以外のブラウザなら、中のテーブルが中央に表示されるのに
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>
です。
No.2ベストアンサー
- 回答日時:
すでに回答しましたが・・それで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">
<!--
table[summary="サンプル"]{
width: 90%;
margin: 0 auto;
background-color:red;
border:solid 10px blue;
border-radius:15px;
}
-->
_</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>
No.1
- 回答日時:
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
スクロールバーのスクロール量...
-
(Javascript)印刷するファイル...
-
Chromeがiframe内の「#~」に釣...
-
別ページのページ内リンクでの...
-
外部ページからハッシュタグ(...
-
「overflow: hidden」ペー ジ内...
-
Hta、onmouseoverイベントをbod...
-
ハイパーリンクに下線を表示す...
-
"mailtoでメールの【氏名】【性...
-
<a href="#" …>の意味を教えて...
-
HTMLでサブフレームから親のス...
-
bodyタグのfocus
-
javascriptとApacheの設定
-
別ファイルのfunctionの読み込み方
-
function の return 値を表示し...
-
あなたのXAMPPのdashboard内のj...
-
getElementsByNameで要素が取得...
-
タイトルバーのウインドを閉じ...
-
初心者javascript ウィンドウサ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
(Javascript)印刷するファイル...
-
ハイパーリンクに下線を表示す...
-
別ページのページ内リンクでの...
-
bodyにwidth:100%をつける理由は?
-
横スクロールを右から左へ・・・
-
ボタンが押されたらWebページの...
-
テーブル内の数値を自動で計算...
-
ページの読み込みが完了してか...
-
"mailtoでメールの【氏名】【性...
-
テキストをクリックすると答え...
-
インラインフレーム内のスクロ...
-
<body id=~>の用途は?
-
リンクをクリックすると文字が...
-
複数のiframeの読み込みについて
-
htmlで任意の行の文字位置を右...
-
<HR>タグでつくる四角形につい...
-
Chromeがiframe内の「#~」に釣...
-
-css- ページオープン時やリロ...
おすすめ情報