表示倍率を変えるとレイアウトが崩れます。

表示倍率を変えるとレイアウトが崩れます。

現在、Webページの製作練習を行っています。
画面上部にメニューボタンを4つ（223×36）設置しているのですが、
マウスで表示倍率を変えると途端にレイアウトが崩れてしまいます。

スタイルシートは下記のように設定しています。

#container {
margin-left:auto;
margin-right:auto;
width:900px;
text-align:center;
border:1px solid #ffffff;
}

#topNavi {
width:900px;
background:#000000;
border-top:1px solid #a3a3a3;
border-bottom:1px solid #a3a3a3;
}

#topNavi div {
float:left;
margin:0px;
height:36px;
width:223px;
}

そして、それぞれの画像の両脇に、border:1px solid #656464;　を設定しています。

div#containerで、全体が画面の中央に配置されるように設定し、
div#topNaviではメニューの区切りをわかりやすくするために、
上下にborderを設定しました。
div#topNaviで、メニューを横一列に並べています。


ここでいくつか気になっているのですが、
1.#containe、div#topNaviにそれぞれ設定されているborderですが、width900pxの中に含まれるのでしょうか？
2.なぜ倍率を変化すると崩れてしまうのか？
3.何か良い方法はないか？
もしよろしければ、ご教授をお願い致します。

No.2 ベストアンサー 回答者： kuzumiHK 回答日時： 2010/07/30 23:40

>1.#containe、div#topNaviにそれぞれ設定されているborderですが、width900pxの中に含まれるのでしょうか？

標準モードでは、borderの数値は基本的にwidthに含まれません。
ただし、tableのborderは外側半分をmarginに含んだり少し複雑なので全てではありませんが。
Firefoxの場合は、この部分に関しては標準準拠しておらずmarginに含んでいないようにみえますし、ブラウザ依存の部分も多々あります。

>2.なぜ倍率を変化すると崩れてしまうのか？

No1さんがおっしゃっているように数値が割り切れずに足した数が900pxを超えてしまっているからではないでしょうか。

>3.何か良い方法はないか？

ボタンに画像を使用している場合、width:225pxに増やして、
画像にborderを書いてしまうという方法があります。
テキストを使っている場合も、背景画像にborderを引いてしまえば解決できます。

この回答へのお礼

ご回答ありがとうございました。

今回はアドバイスいただいたように、画像に含めて作成することにしました。
割り切れない端数は結構問題になるのですね；；
勉強になりました。

お礼日時：2011/08/01 20:17

No.1 回答者： Anti-Giants 回答日時： 2010/07/30 16:29

例えば

1pxの線を引いてから2倍⇒2pxの線
2倍してから1pxの線⇒1pxの線

あとは、拡大した時の端数の扱いのバラつきとか。

この回答へのお礼

端数のばらつきによっても変わってしまうのですね。
ありがとうございました。
もう一度考え直してみます。

お礼日時：2011/08/01 20:16