- ベストアンサー
dreamweaverにて、ブラウザによる拡大・縮小でレイアウトが崩れないようにするには？
こんにちは。 dreamweaver初心者です。 質問させて頂きます。 Dreamweaverを使用して、ホームページを作成しているのですが、 絶対配置（スタイルシート）で、ある画像を配置して、IE(version7)で拡大を行うと、 表示位置が若干ずれてしまいます。 拡大を行っても表示位置がずれないようにするには、 どうしたらいいでしょうか？ ※説明不足でしたら、是非突っ込みを！
- someinosimin
- お礼率49% (30/61)
- ホームページ作成ソフト
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ソースを見ないと分からないけどIE7のズーム機能のバグに起因する問題のようにも見える。 右側に絶対配置を行うとIE7で拡大を行ったとき無駄な横スクロールが発生します。 110%、120%と拡大していくとページの横幅も110%、120%と拡大して計算されてしまう。 あと、a:hoverにposition:relative;を指定するとズーム時にカーソルを合わせたときおかしくなるってのも見たことありますね。 ま、結局のところはよく分からないんでソースコードが見たい。それが結論どぇす。
補足
ご回答有難うございます。 ソースはこんな感じです↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>ＧＲＥＥＮ ＊ ＳＰＡＣＥ</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="haikei"> <div id="top"> <h1>green space</h1> <h2 class="hajimete">初めての方へ</h2> <h2 class="toiawase">お問い合わせ</h2> <h2 class="kaisha">会社概要</h2> </div> ・・・・・・・・・・・・・・・・・・・・・・・・・・・ ＣＳＳは↓ #haikei { background-image: url(../images/haikei.gif); background-repeat: no-repeat; margin: 0px auto; padding: 0px; height: 1000px; width: 780px; } body { margin: 0px; padding: 0px; } #top { height: 171px; width: 780px; } #top h1 { background-image: url(../images/title_hana.gif); background-repeat: no-repeat; text-indent: -9999pt; height: 170px; width: 780px; margin: 0px; padding: 0px; } #top .hajimete { background-image:url(../images/button_hajimete.gif); background-repeat: no-repeat; height: 25px; width: 119px; margin: 0px auto; padding: 0px; text-indent: -9999pt; position: relative; bottom: 70px; left: 40px; } #top .toiawase { background-image:url(../images/button_toiawase.gif); background-repeat: no-repeat; height: 25px; width: 120px; text-indent: -9999pt; position: relative; margin-top: 2px; margin-right: auto; margin-bottom: 0px; margin-left: auto; left: 180px; bottom: 97px; } #top .kaisha { background-image:url(../images/button_kaisha.gif); background-repeat: no-repeat; height: 25px; width: 120px; text-indent: -9999pt; margin-right: auto; margin-left: auto; position: relative; left: 317px; bottom: 143px; margin-top: 21px; } こんな感じです。 すみません、質問では絶対配置としていましたが、 実際は相対配置でした。