スタイルシート widh、background-color の動作がIEとその他ブラウザで違う

質問

現在、tableタグで作ったサイトをstylesheetに置き換え中です。

<span style="width:100%; background-color:9FFFAF;">
TEST
</span>

こんな感じで、左から右まで画面いっぱいに横に帯のように表示したいのですが、IEと、その他（FireFox, Opera, Mozilla)で表示が違います。

IEでは左から右まで画面いっぱいに背景色が有効になります。
その他のブラウザでは、文字が表示されている部分だけ背景色が有効になります。

FireFoxなどでもIEと同じように画面左から右端まで帯のように背景色を変えたいのですが、どのようにすればよいでしょうか？

回答No.1

elttac · ベストアンサー

それは，width プロパティの使い方が間違っているためです。IE が誤った結果で，Firefox・Opera の結果が正解です。

　解決策は，span 要素でなく div 要素を使用することです。

<div style="width: 100%; background-color: #9FFFAF;">
TEST
</div>

色番号の前には「#」をつけます。

　多くのブラウザの既定の状態で，span 要素には，width プロパティは適用されません。ですから，正しい解釈をする，Firefox と Opera では，幅がいっぱいならないのです。

　スタイルシートに関する参考サイトを，参考 URL に掲げますので，こちらをご覧になるのもよいでしょう。

参考URL：

http://www.tg.rim.or.jp/~hexane/ach/

お礼

インライン要素とブロック要素の違いですね。
ありがとうございます。

色番号の#については、PerlでHTMLを生成しているので、なんとなく....
" や ' で括ってる場所なら#が入っててもコメントアウトにならないのは分かってます。