- 締切済み
CSSでコンテンツを画面中央に配置（MacIEに対応）
CSSを使って、コンテンツをブラウザ内の左右、上下中心に 配置しようとしているのですが、MacIEのみうまくいきません。 いくつか調べてみたのですが、 （参考：http://harmony.blog5.fc2.com/blog-entry-87.html） ------------------------------------------------------ div#main{ position: fixed; _position: absolute; top: 50%; left: 50%; margin-top: -248px; margin-left: -320px; width: 640px; height: 496px; } ------------------------------------------------------ この方法の場合、MacIEのみ、枠内の要素にマウスオーバーが効かなくなってしまいます。 position:absolute に変更するとマウスオーバーは効くのですが、 やはりMacIEのみ「margin-top」と「top」の動作がおかしくなって しまいます。 こちらで以前同じ質問があったようですが、方法は同じものでした。 http://okwave.jp/kotaeru.php3?q=2029677 これ以外の方法でもよいので、何か解決方法をご存知の方がいらっしゃいましたらよろしくお願いします。 ※DOCUMENT TYPEは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> です。
- greenapple0321
- お礼率75% (25/33)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- sanas
- ベストアンサー率100% (8/8)
すみません、タイプミスです; Mac IE はバグが多くて動かしてみないとわからない部分が多いです。 もう少し詳しいタグをいただけますか？ こちらでも試して見ます。
- sanas
- ベストアンサー率100% (8/8)
x-indexの指定でどうでしょう？
補足
x-indexというものがスタイルシートの中で見つからなかったのですが、 z-indexでしょうか。 （もし私の勉強不足でしたらすみません） 現在、bodyの中に一つのdivのみ置いた状態でテストしているので 重なるボックスはないのです。 重なるボックスがなくても指定して解決する方法がありましたら 詳しく教えていただけるとありがたいです。
お礼
現時点では標準準拠モードでは不可能のようです。 ありがとうございました。
補足
お返事ありがとうございます。 全体のタグは下記の通りです。（テスト用） ボックス位置がわかりやすいようにborder枠とリンクを追加しました。 ----------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv=Content-Script-Type content=text/javascript> <meta http-equiv=Content-Style-Type content=text/css> <title>テスト</title> <style type="text/css"> <!-- div#main{ position: fixed; _position: absolute; top: 50%; left: 50%; margin-top: -248px; margin-left: -320px; width: 640px; height: 496px; border: 1px solid #999999; } a{ color:red; } a:hover{ color:blue; } --> </style> </head> <body> <div id="main"> テストです。<a href="#">リンク部分。</a> </div> </body> </html> ----------------------------------------------------------------- DOCUMENT TYPEが互換モードなら正常動作するのですが、 やはり標準準拠モードではうまくいきません。 また、書き忘れましたがMacIEのバージョンは5以上です。 どうぞよろしくお願いします。