全体幅とメニューバーの幅が合わない問題

2009/05/17 12:13

このQ&Aのポイント

全体幅とメニューバーの幅が合わず、メニューバーが短くなってしまう問題について相談です。
メニューバーは5項目で、各項目の幅は151pxですが、幅が合わずにズレが生じています。
全体幅を759pxに設定していますが、各項目の幅を152pxにすると問題が解消するようです。

y-w-
お礼率79% (59/74)

CSS
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

abril
ベストアンサー率69% (388/560)

2009/05/19 17:40 回答No.3

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

質問者

お礼 2009/05/19 18:20

abril様ありがとうございます。私はホームページビルダーを使用しています。自動的に『HTML 4.01 Transitional』が記入されていました。 HTML 4.01 Strictシステム識別子に変えてみるとピッタリ表示されました。「標準準拠モード」「後方互換モード」という言葉は聞いたことはありましたが、このような違いが出るということは今回始めて知りました。とても勉強になりました。原因究明と解決方法をいただきありがとうございました。

その他の回答 (2)

askaaska
ベストアンサー率35% (1455/4149)

2009/05/18 17:40 回答No.2

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

質問者

お礼 2009/05/18 18:58

askaaska様お返事ありがとうございます。試してみたところ、IEではうまく表示できましたが、firefoxでは崩れてしまいました。（２段になってしまいます） >borderは151pxの中に含まれるわ。調べてみたところスタイルシートの標準既定はwidthはborder内で、IEはborderも含まれてしまうようですね。IEのバグのようです。原因は分かったのですが、解決方法がまだ見つかっておりません。各ブラウザーで同じように見せる方法が知りたいのですが。