- ベストアンサー
中央寄せ
ie6でmargin:0 autoで中央寄せできないバグがありましたが ie7では中央寄せできるようになったのでしょうか？ よろしくお願いします
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
バグと言うより、IE6当時まだCSS2が未確定でした。IEは、元々MicrosoftにとってOSを販売すための手段でしかなく、ウェブの仕様が変わってもIEのユーザーのために修正していくという手法が取られていません。 IE7だと、CSS2に相当対応はされていますが、完全ではありません。また、過去にIE用に作られたページを当時の仕様どおりに見せるための互換モードが標準でした。IE8以降はウェブ標準がデフォルトになりましたが、その場合も互換モードが使えます。 その切り替えは、DOCTYPE宣言で行われますので、DOCTYPEを正しく書いて、かつHTMLをstrictで記述すれば、IE6以降なら配置に関しては期待通り--ウェブ標準--に表示されます。 ⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) ★IE6でも、標準モードだと中央に配置されます。 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ ＞ie7では中央寄せできるようになったのでしょうか？ IE6を含め作者次第です。 1) HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 ) Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) でチェック(右上のDATAから) DOCTYPEを標準モードで動作するように正しく書く 2) スタイルシートをきちんと書く W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) この二つで、配置に関しては差はでなくなるでしょう。 [サンプル] ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) でチェック済みのHTML4.01strict + CSS2.1です。 IE6は、(static以外の)親コンテナブロックのサイズを参照できませんから、nav(ナビゲーションの高さが指定されない) IE6はmin-heightの指定が利かない ★タブは＿に置換してあるので戻す。 <!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"> <!-- html,body{margin:0;padding:0;background-color:gray;} div.header,div.section,div.footer{ width:80%;min-width:630px;max-width:900px; margin:0 auto; padding:5px 10px; } div.section{ min-height:200px; position:relative; } div.section div.nav{ position:absolute; right:0;top:0; width:20%;height:100%; } div.section h2,div.section p{ line-height:1.8em; margin:0 21% 0 0; } /* 分かりやすいよう色づけ */ div.header{background-color:aqua;} div.section{background-color:white;} div.section h2,div.section p{background-color:rgb(255,255,180);} div.section div.nav{background-color:silver;} div.footer{background-color:lime;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p> ＿＿＿ie6でmargin:0 autoで中央寄せできないバグがありましたが、ie7では中央寄せできるようになったのでしょうか？ ＿＿</p> ＿＿<p> ＿＿＿よろしくお願いします ＿＿</p> ＿＿<p> ＿＿＿ie6でmargin:0 autoで中央寄せできないバグがありましたが、ie7では中央寄せできるようになったのでしょうか？ ＿＿</p> ＿＿<p> ＿＿＿よろしくお願いします ＿＿</p> ＿＿<div class="nav"> ＿＿＿<h3>目次</h3> ＿＿＿<ol> ＿＿＿＿<li>第一章</li> ＿＿＿＿<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> ＿＿＿<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>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。 ＞HTML5を使うときはie6、ie7でmargin: auto;で中央寄せできますか？ えっ!!。HTML5を使う時点で、IE6,IE7,(IE8)は切り捨ててますから・・・考慮しません。 スマホやIE9以降、および他のモダンブラウザ、firefox,Opera,Chromeをターゲットに絞ります。 HTML5で書いてIE6,7,8はターゲットブラウザでないので、質問自体が矛盾しています。(javascriptを使って対処は出来ますが、javascriptを無効にしていたら崩れます。) {HTML5のサンプル]・・かならず、試すこと ★タブは＿に置換してあるので戻す。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <style media="screen"> <!-- html,body{margin:0;padding:0;background-color:gray;} p{text-indent:1em;} header,section,footer{ width:80%;min-width:630px;max-width:900px; margin:0 auto; padding:5px 10px; } h1,h2,h3,p{ margin:0;line-height:1.8em; } section{ min-height:200px; position:relative; } section section{ width:auto;min-width:0; margin:0 auto; padding:0; min-height:0; } section nav{ position:absolute; right:0;top:0; width:20%;height:100%; } section section,section h2{ margin:0 22% 0 0; } /* 分かりやすいよう色づけ */ header{background-color:aqua;} section{background-color:white;} section h2,section p,section h3{background-color:rgb(255,255,180);} section nav{background-color:silver;} footer{background-color:lime;} --> </style> </head> <body> ＿<header> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</header> ＿<section> ＿＿<h2>見出し</h2> ＿＿<section> ＿＿＿<h3>質問</h3> ＿＿＿<p> ＿＿＿＿ie6でmargin:0 autoで中央寄せできないバグがありましたが、ie7では中央寄せできるようになったのでしょうか？ ＿＿＿</p> ＿＿＿<p> ＿＿＿よろしくお願いします ＿＿</section> ＿＿<section> ＿＿＿<h3>回答</h3> ＿＿＿<p> ＿＿＿＿IE8以前は、HTML5の新しい要素を理解できませんから、それらをターゲットにするときはHTML5は使用しません。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿また、DIVは原則として使えなくなりますし。 ＿＿＿</p> ＿＿</section> ＿＿<nav> ＿＿＿<h3>目次</h3> ＿＿＿<ol> ＿＿＿＿<li>第一章</li> ＿＿＿＿<li>第二章</li> ＿＿＿＿<li>第三章</li> ＿＿＿＿<li>第四章</li> ＿＿＿</ol> ＿＿</nav> ＿</section> ＿<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> ＿</footer> </body> </html>
お礼
回答ありがとうございました 勉強になりました
お礼
回答ありがとうございます <!DOCTYPE html> HTML5を使うときはie6、ie7でmargin: auto;で中央寄せできますか？