IE 7 Beta をお使いの方、かつ Web 開発者の方に質問です。


IE でのブロックレベル要素のセンタリングについて、こちら

http://www.mozilla.gr.jp/standards/webtips0004.html

で DIVを二重に重ねる方法について述べられていますが、IE 7 でも単に margin-right/left を auto にするだけではセンタリングされないのでしょうか。

文書型宣言によってはセンタリングされるとか、単一の DIV だけでもセンタリングが可能になっているようでしたら、その実例をサンプルで示していただけると大変ありがたいです。

ちなみに手元に IE 7Beta がインストールされている PC があるので、そちらでかんたんに確認したところ、やはり DIV を2つ重ねないとセンタリングされないようでした。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/07/27 11:20:49
  • 終了:2006/08/03 11:25:03

回答(4件)

id:kazu1107 No.1

kazu1107回答回数199ベストアンサー獲得回数142006/07/27 12:15:17

ポイント23pt

私自身IE7を試したことがないですが、一応IE7 beta2ではちゃんと対応しているようです。(以下ソースはGoogleのキャッシュです・・・一番わかりやすかったけどページ自体はもう閉鎖してました)

http://72.14.203.104/search?q=cache:NFSlY9dBb9kJ:ksnk.blog7.fc2....


ただ、まだまだIE6が現役ですのでシェアの多いものにはちゃんと対応した方が良いかと思います。

id:ryuzi_kambe

ありがとうございます。ただ、本日出ている記事で、重要度の高い自動更新で IE7 を配布

http://internet.watch.impress.co.jp/cda/news/2006/07/27/1280...

という記事も出ていたので、出来うる限りの調査が必要と考えています。

このサイトが閉鎖してしまっているのは非常に残念ですね。

2006/07/27 12:41:49
id:nyama No.2

のり回答回数86ベストアンサー獲得回数62006/07/27 12:17:26

ポイント23pt

IE6 でも標準モードだと margin-left:auto;marginright:auto でセンタリングできるようです。

http://www.mars.dti.ne.jp/~fuming/advanced/dtd.htm

がよくまとまっています。

xhtml の場合、xml 宣言があると互換モードになってしまうというあたりがアレですね。IE7 ではここら辺りは完全ではないものの解消されています。

http://blog.drry.jp/2006/02/25/ie7-b2-xhtml

何か作業中のようなので、もし見られない場合は、

http://72.14.235.104/search?q=cache:xmmgJ5WVYAIJ:blog.drry.jp/20...

あたりをどうぞ。

id:ryuzi_kambe

そうなんですか、IE6 でも・・・!今回対象のサイトには・・・なんと文書型宣言が入れられません(泣)これはなかなか辛いところです。

XHTML ではないので、ちょっと希望がもてました。ありがとうございます。なんとか文書型を入れられるように、努力してみます。

上記サイトは作業中とのことで、少し安心しました。回答ありがとうございました。

2006/07/27 12:45:22
id:wizemperor No.3

wizemperor回答回数379ベストアンサー獲得回数522006/07/27 12:30:34

ポイント22pt

IE 7 Beta 3です。

このバグは修正されていると思います。

とりあえずHTML 4.01、XHTML 1l0で、それぞれTransitional/Strict、XML宣言ありと無しの組み合わせを試してみましたが問題ありませんでした。

以下、簡略化のためbody要素内のみ、style属性でスタイルを指定しています。

<body>

<div style="width: 100px; border: 1px solid #000; margin: 0 auto;">

<h1>見出し</h1>

<p>パラグラフ</p>

</div>

</body>

div要素の幅を指定していない等が原因ということはないでしょうか?

ダミーです

http://yahoo.co.jp

id:ryuzi_kambe

なるほど、細い回答ありがとうございます。

div の幅、試してみようと思います。

2006/07/27 12:44:54
id:dede-suke No.4

dede-suke回答回数11ベストアンサー獲得回数12006/07/27 12:44:25

ポイント22pt

IE7(IE6でも可)のセンタリングは文書型宣言の種類が標準モードのときに限りできます。

試しに下のHTMLを保存してIE7で実行して下さい。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<title>テスト</title>

<div style="margin-left:auto;margin-right:auto;width:10em;border:1px solid red;">センタリング</div>

 

文書型宣言の種類と表示されるモードについては下のサイトを見てください。

http://www.mars.dti.ne.jp/~fuming/advanced/dtd.htm

id:ryuzi_kambe

ありがとうございます。

http://www.mars.dti.ne.jp/~fuming/advanced/dtd.htm

は他の方からもありましたので二度目の推薦ですね。熟読します。

2006/07/27 12:49:51

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません