お世話になっております。
今回は、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ベストアンサー
- 回答日時:
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
- 回答日時:
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
- 回答日時:
時間が取れないので、私のをちょっと変更して
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
- 回答日時:
原因は、既に回答が出ていますので、「これもハックしなきゃならないものですか?」というコメントを受けまして、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は奥深いですね・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
横のTableタグのヘッダを...
-
フッターを固定したい…
-
div入れ子、親でmarginを設定す...
-
CSSで背景画像を一番下にもって...
-
cssの記述 ¥マークについて
-
HTMLで一部だけスクロールする...
-
CSS/HTML で画像 2枚重ねた上に...
-
セル内のリンク文字を中央に配...
-
画像を中心に配置したい
-
<form>タグのプルダウンメニュ...
-
テーブルの中にiframe
-
CSSがなぜかfont-sizeだけ効か...
-
CSSで指定した背景画像にリンク...
-
MACのスタイルシート対応
-
css初心者 フレックスボックス...
-
CSSでbackground-imageを複数指...
-
【CSS】ヘッダーの高さが不明の...
-
左側に複数の縦バナーを並べたい
-
ヘッダーの高さが合わない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
余分な縦スクロールバーが出て...
-
<div>と<div>の間の10px程の...
-
【CSS】ヘッダーの高さが不明の...
-
CSSでボックスのheightが0になる
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
Media Queries 4 で 非推奨とな...
-
【HTML&CSS】フッター下部の余...
-
初心者html・CSS ウィンドウを...
おすすめ情報