全体幅とメニューバーの幅が合いません

Question

レイアウトとしてヘッダーの下にメニューバーをおいています。メニューバーは5項目あり、各項目幅151px。右側に1pxのボーダーを入れています。最後の項目の右側のボーダーは"なし"にしています。 (151 x 5) + 4 = 759 この幅に合わせて全体幅を759pxに設定しているのですが、幅が合いません。（メニューバーが少し短くなってしまいます）ちなみに各項目の幅を152にすると全体の幅は760でも大丈夫のようです。ブラウザーで確認するとピッタリ来ています。ただ『ページ編集』ではズレが生じています。ホームページビルダー13を使用しています。メニューバーは箇条書きを回り込みで横一列にしています。 ↓参考として

div#container{ width : 759px; } ul#menu li{ list-style-type : none; float : left; } ul#menu{ padding-left : 0px; margin-left : 0px; font-size : 0.75em; background-color : #0071e1; height : 30px; margin-top : 0px; margin-bottom : 30px; } ul#menu li a{display : block; line-height : 30px; color : white; text-decoration : none; text-align : center; width : 151px; background-color : #003a75; border-right-width : 1px; border-right-style : solid; border-right-color : white; } ul#menu li a:hover{ background-color : #0071e1; } ul#menu li.menulast a{ border-right-style : none; } なぜ759pxの幅では合わないのか悩んでおります。どなたかアドバイスよろしくお願いします。

abril · Accepted Answer

151px×5＋4px=759px、でCSSでの計算はオリジナルのままで正しいですね。
で、(X)HTML側が標準準拠モードであれば問題ない筈なのですが、IEでボックスのwidthの中にborderやpaddingの値（幅）を含めてしまうバグは後方互換モードの時に生じます。
現在、IEとFirefoxで表示の足並みが揃わないという事は、質問者さまの(X)HTMLが、IEが後方互換モードになる様な条件が揃ってしまっているのだと思います。例えば、DOCTYPEがXHTMLの場合、DOCTYPE宣言に先立ってXML宣言を記述するのが文法上は○なのですが、やっかいな事にIE6のお馬鹿さんはXML宣言が入っていることでDOCTYPEスイッチが切り替わり後方互換モードになってしまうというバグがあります。

ただ…IE6ではなく、IE7なんですよね？IE7では一応、XML宣言＋DOCTYPE宣言がXHTMLの場合でも標準準拠モードになるので、今回の計算の結果に限って言えばFirefox等と同じ挙動になる筈なんですよね。IE7が後方互換モードになるという条件を満たすのは、HTML 4.01 Transitional（システム識別子なし）、HTML 4.01 Frameset（システム識別子なし）、DOCTYPE宣言なし、の3種類になります。そして、これらの場合Firefox等も一律で後方互換モードになる事はなるのですが、Firefox等は後方互換モードであってもwidth, heightの計算に関しては正しい（borderやpaddingの幅を含めない）解釈をします。

質問者様の現在の状況から察するに、DOCTYPEが上記3種類の何れかになっているのでは？（ちなみに3番目の「DOCTYPE宣言なし」というのはHTML文書としては論外なので、まさかそれではないと思うのですが）
であれば、一番望ましい方法は、IE6/7とFirefox等を問わず、標準準拠モードになる様なDOCTYPEを選択して作成する事なのですが（例えばHTML 4.01 Strictシステム識別子あり、など）。そうすれば、CSSはオリジナルのままでも幅の解釈は正しくなります。
このあたりの事は下記のサイトなどが一覧でまとまっていてわかりやすいかと思います。
【参考】http://2xup.org/log/2007/07/27-2111

askaaska · Answer

width:151pxが5つだから
メニューの幅は755pxよ。
borderは151pxの中に含まれるわ。
widthに含まれないのはmarginね。

grumpy_the_dwarf · Answer

もしかして古代のInternetExplorerで見てませんか。アレはwidth
の内側にborderを取るバグがあるので、今回の場合ではcontainer
よりmenuが4px短くなります。マトモなブラウザなら大丈夫。

全体幅とメニューバーの幅が合いません

151px×5＋4px=759px、でCSSでの計算はオリジナルのままで正しいですね。

width:151pxが5つだから

もしかして古代のInternetExplorerで見てませんか。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング