メニューリストの幅について

質問

横並びのメニューについて。
全体の横幅はすべてのブラウザで統一されています。

IEだけひと枠のメニュー項目が長く、二段に改行されておかしいです。Chromeなどは正常に一列に表示されます 。なにが原因ですか？

position absoluteで絶対配置してるメニューです。

回答No.3

神崎 渉瑠（@taloo）

ブラウザの設定で文字を大きくしてるからではないでしょうか。
Chromeでも文字を大きくすれば改行されて表示されるようになると思います。

回答No.2

ORUKA1951

通常は逆になるはずですが？
★まず、基本的なことから
1) DOCTYPEスイッチで標準モードで動作するようにすること。
doctypeスイッチ - Google 検索( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81 )
2) HTML4.01strict、XHTML1.0strict,XHTML1.1で作成すること
　さすがに、いまどきtransitinalで作成する人はないでしょうが・・
　「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )-1999年HTML4.01勧告」

　それで、この手のトラブルはないはずです。
　IEの互換モードは、boxのサイズをborder辺の内側で解釈します。本来は、padding辺の内側でなければなりません。
　⇒8.1 ボックスの寸法（Box dimensions） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions )
　IEの互換モードだと、absoluteされたボックスのサイズはWeb標準より大きく計算されてしまうのです。そのためその1/4のボックスを４つ並べることが出来なくなるのです。
　間に合わせの方法として、paddingを使わないと言う逃避方法もありますが・・お勧めしません。
<div class="header"></div>
<div class="section"></div>
<div class="footer">
　<div class="nav">
　　<ol>
　　　<li></li>
　　　<li></li>
　　　<li></li>
　　　<li></li>
　　</ol>
　</div>
</div>
とすると
div.footer div.nav{
position:absolute;
top:0;left:0;
width:100%;
}
div.footer div.nav ol,div.footer div.nav ol li{
list-style-type:none;
margin:0;padding:0;
text-align:center;
line-height:2em;
}
div.footer div.nav ol li{
float:left;
width:25%
}
とか・・

回答No.1

kamikami30

具体的に書いたらいい。
それだけじゃ、なかなかわかりません。