【CSSについて】リストをフロートするとfirefoxでボーダーが消える

質問

お世話になっております。
今回は、CSSの質問です。
IE6.0とFF3.0の違いなのですが、ソースを以下に記述します。

***HTML***
<ul id="navi">
<li><a href="#">風景</a></li>
<li><a href="#"> 生き物</a></li>
<li><a href="#">建物</a></li>
<li><a href="#">乗り物</a></li>
</ul>

***CSS***
#navi {
margin-left: 0px;
padding-left: 0px;
list-style-type: none;
width: 600px;
border-right: 1px solid #333333;
}
#navi li {
float: left;
border-left: 1px solid #000000;
border-top: 1px solid #333333;
border-bottom: 1px solid #000000;
width: 149px;
}
#navi a {
display: block;
background-color: #ff9900;
color: #FFFFFF;
text-decoration: none;
width: 149px;
line-height: 30px;
text-align: center;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.5em;
}
#navi a:hover {
background: #00FFFF;
color: #000000;
}

IEではボーダーで区切られたナビがキレイに表示されますが、FFでは右端のボーダーが消えてしまいます。
これもハックしなきゃならないものですか？
とりあえず、背景に画像を使用することで逃げられるのですが、すっきりしませんので対処法を教えてください。

よろしくお願いします。

回答No.2

simeondun · ベストアンサー

IE7では一番右側のリストが下に回ってしまいレイアウトが崩れてしまいますね。
Firefoxですと仰る通り一番右側のボーダーが表示されません。
で、liをひとくくりにするのではなく、一番左にボックスをひとつ作り
右側へ左のボーダーが無いボックスをくっつけていく作成方法ですと
IE7でもFirefoxでも表示されました。たぶんIE6でも可能だと思います。

【記述例】
***CSS***
#navi {
list-style:none;
text-align:center;
}
.box1 {
float:left;
border-right:1px solid #333333;
border-left:1px solid #000000;
border-top:1px solid #333333;
border-bottom:1px solid #000000;
}
.box2 {
float:left;
border-right:1px solid #333333;
border-top:1px solid #333333;
border-bottom:1px solid #000000;
}
#navi a {
display:block;
background-color:#ff9900;
color: #ffffff;
text-decoration: none;
width:150px;
line-height: 30px;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.5em;
}
#navi a:hover {
background: #00FFFF;
color: #000000;
}

***HTML***
<ul id="navi">
<li class="box1"><a href="#">風景</a></li>
<li class="box2"><a href="#"> 生き物</a></li>
<li class="box2"><a href="#">建物</a></li>
<li class="box2"><a href="#">乗り物</a></li>
</ul>

下記のページを参考にしています。
［リストでメニューを作る（横並び）］
http://www.1uphp.com/con1/list/listmenu4.html

お礼

早速お返事いただきありがとうございます。
教えていただいたとおりにすると、IE6でもFFでもきちんと表示できました！
超シンプルにはなかなかできない、ということもわかりました。
どうもありがとうございました。

回答No.5

abril

ANo.3です。

> ★反応領域がFF3.0とIE6または7では違ってるのですが、こういうものですか？（IEではテキスト上しか反応しません）

ああ…本当ですね。aを"display: block;"としているので、親要素liで指定した"width: 150px;"そのまま継承してくれる筈なんですが、IEではダメな様です。しかし、ここのaに何らかのwidthの値を指定してしまうと、結局元の木阿弥（IEとそれ以外のボーダー分の計算方法の違いが出てしまう）なので、これは宜しくないですね。ANo.2様の方法で上手く解決してらっしゃるとの事ですのでANo.3については忘れて下さい。検証不足にて失礼しました。

ただ…ちょっと気になったのですが、確か、メニューの全体の幅は「ボックスは150pxが4つプラスボーダー1pxの合計601pxとなります。」がご希望の筈ですよね？ANo.2様の方法ですと、現状ではaが"width: 150px;"で、その親要素のliに1pxのボーダーを引いている（つまり150pxの更に外側に1pxの線を引いている）ので、実際のul#naviの幅は601pxとはならない（150px×4＋1px×5=605px）のですが、それは構わないのでしょうか？aを"width: 149px;"とすれば、149px×4＋1px×5=601pxで質問者さまのご希望通りとなりますが。

> ★「clearfixはフロートさせたものの親要素の大きさを定めるためのもの」という理解でいいですか？

「floatした要素の高さは親要素の高さに反映されない」というのが本来の仕様です。ですので、子要素が「浮きっぱなし」だと親要素はその高さを認識しません（IEで一見問題なくレイアウトされている様に見えるのは逆に仕様に反したバグによる為です）。clearfixは、floatした子要素を内包する親要素の側でその浮きっぱなし状態を上手く解除（clear）してやる為の賢い技です。例えば下記の解説等をお読みになると理解しやすいかもしれません。
【参考】http://blog.d-spica.com/entry/070307clearfix.html
ここの一文をそのまま抜粋しますが、
「clearfixの最大のメリットは、CSSでボックスを生成するので、XHTMLソースに無意味な要素を入れないですむことでしょう。」
…ではないかと。この技を思いついた人には脱帽しますね。

回答No.4

ORUKA1951

時間が取れないので、私のをちょっと変更して
opera/IE/sfari/firefox---OK, amaya--×
ul#navi {
display: block;
padding-left: 0px;
list-style-type: none;
width: 600px;
}
ul#navi li{
display:inline;
}
ul#navi li a{
display: block;
float: left;
border: 4px outset rgb(255,255,0);
line-height: 30px;
height: 30px;
width: 142px;
text-decoration: none;
text-align: center;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.5em;
background-color: #ff9900;
color: #FFFFFF;
}
ul#navi li a:visited{
border-color: rgb(200,200,0);
background-color: rgb(200,200,0);
}
ul#navi li a:hover{
background-color: #00FFFF;
color: #000000;
border-color: rgb(60,60,255);
}
ul#navi li a:active{
border-color: rgb(155,0,255);
border-style: inset;
}

回答No.3

abril

原因は、既に回答が出ていますので、「これもハックしなきゃならないものですか？」というコメントを受けまして、CSS hackを使用しない解決方法の一例です。以下のサンプルは（質問者さまのDOCTYPE等が不明ですので）HTML4.01 Strictと仮定して作成してあります。
ANo.2様と考え方は一部被ります。

---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<ul id="navi">
<li id="navi01"><a href="#">風景</a></li>
<li id="navi02"><a href="#">生き物</a></li>
<li id="navi03"><a href="#">建物</a></li>
<li id="navi04"><a href="#">乗り物</a></li>
</ul>

※classではなく、idとして全てのアイテム（li）に個別にふります。
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
#navi {←【1】
zoom: 100%;
margin-left: 0px;
padding-left: 0px;
list-style-type: none;
width: 600px;
}
#navi:after {←【2】
height: 0;
visibility: hidden;
content: "";
display: block;
clear: left;
}
#navi li {←【3】
float: left;
width: 150px;
}
#navi a {←【4】
display: block;
background-color: #f90;
color: #fff;
text-decoration: none;
line-height: 30px;
text-align: center;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.5em;
border-width: 1px 0 1px 1px;
border-style: solid;
border-color: #333 #333 #000 #000;
}
#navi li#navi04 a {←【5】
border-right: 1px solid #333;
}
#navi a:hover {
background: #0ff;
color: #000;
}
---------------------------------------------------------------------
【1】
・ボックスモデルの計算方法が条件により異なるので、ulにはボーダーは指定しません。
・子要素liがフロートしているので、IE以外では実際には高さが失われ且つulの右側に下の要素が回り込む状態になっています。これを解除する為に所謂clearixというtipsを使っています（zoom: 100%;）。【2】の指定とセットです。
【2】
・【1】を参照のこと。
【3】
・【1】と同様の計算方法の違いを回避する為、liにはボーダーを指定せず、親要素の幅を4等分した"width: 150px;"だけを指定します。
【4】
・ブロック要素化されているので、親要素liで指定した幅にレンダリングされますので、ここでボーダーを指定します。右ボーダーは指定しません。
【5】
・idがnavi04のliの子要素のaだけは、右ボーダーが必要となるので、ここで指定。

本来は、IE6以外だとfirst-childというセレクタが使えるので、liにわざわざidをふらなくても、liに対するボーダーの指定を今とは逆に左だけ非表示にしておいた上で、first-childで「アイテムの最初だけ左ボーダーを引く」という指定を追加しておけば、HTML側のliはidなしでも最初の「風景」というメニューボタン部分だけ、左に線が引かれる様になります。
本来ならこちらの指定の方がスマートです。ただし、これは上記で申し上げた通りIE6では無効となってしまう為、どうしてもhackもしくはコンディショナル・コメント等の技の併用が必要になってきます。それがおいやでしたら、idやclassによる個別指定で間に合わせておくしかないかと。

補足

ていねいに解説していただいてありがとうございます。
★反応領域がFF3.0とIE6または7では違ってるのですが、こういうものですか？（IEではテキスト上しか反応しません）
★「clearfixはフロートさせたものの親要素の大きさを定めるためのもの」という理解でいいですか？

CSSは奥深いですね・・・

回答No.1

grumpy_the_dwarf

幅600pxのボックスの中に幅149pxと左右の枠線それぞれ1pxの合計
151pxな項目が4つなんだから、4pxあふれるのが当たり前です。IEは
ボックスの幅を勝手に広げるバグがあるんですよ。

補足

早速のご回答ありがとうございます。
ボックスは150pxが4つプラスボーダー1pxの合計601pxとなります。