스타일시트에서요..

[mozilla_firefox]

=========== lib.css =========
#d{ border:1px solid #00F;}
#d1{ border:1px solid #F00;}
.sp{ border:1px solid #F0F;}

=========== index.html ========
<style rel="stylesheet" type="text/css" href="./lib.css">
<div id="d">
<div id="d1">
<span id="s1" class="sp">s1</span>
<span id="s2" class="sp">s2</span>
<span id="s3" class="sp">s3</span>
<span id="s4" class="sp">s4</span>
</div>
</div>


이렇게 되었을때 FF에서는 span 스타일이 전혀 듣질 않습니다.
물론 IE 에서는 잘 됩니다.
그래서
=========== lib.css =========
#d{ border:1px solid #00F;}
#d1{ border:1px solid #F00;}

=========== index.html ========
<style rel="stylesheet" type="text/css" href="./lib.css">
<style type="text/css">
.sp{ border:1px solid #F0F;}
</style>
<div id="d">
<div id="d1">
<span id="s1" class="sp">s1</span>
<span id="s2" class="sp">s2</span>
<span id="s3" class="sp">s3</span>
<span id="s4" class="sp">s4</span>
</div>
</div>

이렇게 고치면 잘 됩니다.
이게 inline 과 block 에서의 차이때문에 그런겁니까?
답답합니다..