IE9でのCSSスプライト

質問

*****html*****
<div id="head">
<ul>
<li id="scope1"><a href="index.html">トップ</a></li>
</ul>
</div>
*************
*****css*****
div#head ul {
position:absolute;
top:10px;
left:10px;
width:600px;
height:30px;
overflow:hidden;
}

div#head ul li {
list-style-type:none;
display:inline;
}

div#head ul li#scope1 a{
background: url('test.png') 0px 0px;
width:100px;
height:50px;
text-indent:-9999px;
display:block;
position:absolute;
top:0px;
left:0px;
}

div#head ul li#scope1 a:hover {
background:url('test.png') 0px -50px;
}
**************
上記のような記述で、IE9で表示させたところ、もちろんうまく動作します。

ところが、「display」の部分を2ヶ所両方ともはずしても、なんら問題なく動作しています。
block属性にするのは、<a>で指定したリンクを文字部分だけでなくを画像部分全体に
適用するためだと思っていたのですが、指定しないとまずいものなのでしょうか？

回答No.1

ORUKA1951 · ベストアンサー

無駄な書き方をするからです。
　それぞれのプロパティには、値によって他の性質を持つものがたくさんあります。有名なところではfloat:です。それが指定されると無条件で新たなブロックを作ります。a要素のwidth:、height:を指定すると、それ自体が大きさを持ちます。
　スタイルシートを簡潔に書きましょう。
ところで、気になったのですが、id="scope1"って何でしょう。スタイルシートで、さすがにそれに他のセレクタをつける意味と合わせて??でした。
　ナビゲーションリストだと思いますが、他のaにもそれぞれidがつくのですか?
　その場合は、スタイルシートではなく個別の要素で背景画像のみ追設定したほうがよいのではないかと・・

お礼

ありがとうございます。解決しました。
idの指定については、一考の余地がありあそうですね。