人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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つ重ねないとセンタリングされないようでした。

●質問者: ryuzi_kambe
●カテゴリ:インターネット ウェブ制作
✍キーワード:BETA IE margin pc Web
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● kazu1107
●23ポイント

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

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


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

◎質問者からの返答

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

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

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

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


2 ● のり
●23ポイント

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...

あたりをどうぞ。

◎質問者からの返答

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

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

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


3 ● wizemperor
●22ポイント

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

◎質問者からの返答

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

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


4 ● dede-suke
●22ポイント

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

◎質問者からの返答

ありがとうございます。

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ