我的星星部分显示不出来，span给了宽度和高度了，但是调试显示的是span.star width和height 都是0，这是什么原因呢？

---------------html部分：------------

<div class="index-panel-body index-food-list">

     <ul class="clearfloat">

       <li class="food-item">

          <a href="#">

            <img class="banner" src="../image/demo2.jpg"></img>

            <div class="name">Fugiat nulla sint<span class="price">$30</span></div>

            <div class="star-bar">

               <span class="star"></span>

               <span class="star"></span>

               <span class="star"></span>

               <span class="star"></span>

               <span class="star nostar"></span>

            </div>

          </a>

       </li>

   </ul>

</div>

---------------css部分：------------

.food-item .banner {

    margin-bottom:30px;

height:202px;

}

.index-food-list .name {

    color:#555;

margin-bottom:10px;

}

.index-food-list .price {

    float:right;

}

.index-food-list .star-bar {

font-size:0;

}

.index-food-list .food-item .star {

display:inline;

height:13px;

width:12px;

margin-right:5px;

background-image:url("../image/index-star.png");

background-repeat:no-repeat; 

}

.index-food-list .food-item .noster {

    background-position:0 -13px;}

}