cssのaリンクで、幅(width=)が設定できない。(FireFoxの場合）

質問

cssでサブメニューを作っているのですが、
<div id="menu_sub_other">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">SPAIN</a></li>
<li><a href="#">MAIL</a></li>
</ul>
</div>

#menu_sub_other a {
color:#183770;
width:160px;
text-align:left;
text-decoration:none;
margin : 0px 0 0 0;
padding:3px 10px 3px 15px;
font-weight:bold;
}
マウスhoverで背景の色が変わるようにしようとしているのですが、
aリンクのwidth:160px;とするとIEではきちんとすべて160pxと幅がそろうのですが、
FireFoxだとメニューのボタン名として入力した
文字分の幅しか得られません。

FireFoxで、aリンクの幅を文字数関係なくすべてそろえる方法はありますでしょうか？？
ここ2，3日こんなことで悩んでいます。。(;_;)
どうか、お返事よろしくお願いいたします。

回答No.1

yambejp · ベストアンサー

aはinline要素ですからfirefoxの方が正しいでしょう。

この手のメニューにはaのスタイルシートにdisplay:blockをつけてやるのが
常套手段です

お礼

ありがとうございます！
inline要素とblock要素っていうものがあるんですね！！
大変勉強になりました。

ありがとうございました。

回答No.4

CyberDenx2

もう既に答えは他の回答者様が出されてるので・・・
ウェブサイトを作る際は、Firefoxをメインに作成していきます。
というのもブラウザーの解釈がFirefoxの方が正しいからです。

僕の場合ですが、Firefox・IE6・IE7・Operaを確認しながらやっています。
FirefoxとOperaでてこずることは無いんですが、IE6とIE7でしょっちゅう苦戦しています。
IE6とIE7でも解釈が違う所があるので注意が必要です。

回答No.3

yambejp

#1です。

>常にFireFoxとIEとの互換性と闘いながらページの作成を行っているのでしょうか？
>やはり、慣れで、すぐに両対応のページが作成できるようになるのでしょうか？？

まあある程度慣れでしょうね。
仕様通りに作るとfirefoxでは正常だけど、IEでは異常ということが多いです。
それをIE用にいくつかよく知られているバグ対応を入れてやると、同じ表示に
なるというのが現状です。

そういう意味でFirefoxを基準とするのが上達の早道だと思います

お礼

なるほど～！
これまで、逆にIEメインでやってました。。（汗

参考になりました！ありがとうございました！

回答No.2

grumpy_the_dwarf

A要素は非置換インライン要素なので、firefoxの挙動が正しいです
ね。変だな、と思ったらIEの挙動が間違ってるってのが、HTMLやCSS
を理解するセオリーです。

display:blockにすれば、widthを適用できますよ。ただし、padding
はwidthの外に取るのが正しいので、IEとは表示が一致しないはず。

お礼

ありがとうございます！

やっぱり、cssでホームページを作成している方々は、
常にFireFoxとIEとの互換性と闘いながらページの作成を行っているのでしょうか？
やはり、慣れで、すぐに両対応のページが作成できるようになるのでしょうか？？