css中元素的overflow: hidden失效问题

Question

想要在浏览器左侧固定一个导航栏，宽60px，高同浏览器窗口，导航栏的外围是div，内包含一个ol列表，每个li元素包含导航单元图标（所有导航单元使用同一图片长900px宽100px，通过margin调整显示图片部分），按照预期应当是导航单元内显示图片margin后的局部（长50px宽50px区域），但是实际上显示了图片的缩小图，#sidebar li span {}内的overflow: hidden好像没起作用，请大家帮忙看下哪里有问题（firefox和chrome测试过）。
html的代码块如下：

<div id="sidebar">
  <ol>
    <li class="logo">
      <a href="#">
        <span><img width="100" height="900" alt="" src="sidebar.png"></span>
      </a>
    </li>
    <li class="profile">
      <a href="#">
        <span><img width="100" height="900" alt="" src="sidebar.png"></span>
      </a>
    </li>
    <li class="following active">
      <a href="#">
        <span><img width="100" height="900" alt="" src="sidebar.png"></span>
      </a>
    </li>
    <li class="activity">
      <a href="#">
        <span><img width="100" height="900" alt="" src="sidebar.png"></span>
      </a>
    </li>
  </ol>
</div>

css代码如下

#sidebar {
    background: none repeat scroll 0 0 #FFFFFF;
    border-right: 1px solid #DDDDDD;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    overflow: hidden;
    position: fixed;

    z-index: 12;
}

#sidebar ol {
    height: 100%;
    overflow-y: scroll;
    width: 200px;
}

#sidebar li {
    font-size: 13px;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    position: relative;
    width: 180px;
}

#sidebar li a {
    display: block;
    padding: 0;
}

#sidebar li span {
    display: inline-block;
    height: 50px;
    margin-left: 5px;
    margin-right: 0;
    overflow: hidden;
    vertical-align: middle;
    width: 50px;
}

#sidebar li a span img {
    display: block;
}

#sidebar li.profile img {
    margin: -50px 0 0;
}

#sidebar li.following img {
    margin: -100px 0 0;
}

#sidebar li.activity img {
    margin: -150px 0 0;
}

Answer 1

用雪碧图来做吧。

<div id="sidebar">
  <ol>
    <li class="logo">
      <a href="#">
        <span></span>
      </a>
    </li>
    <li class="profile">
      <a href="#">
        <span></span>
      </a>
    </li>
    <li class="following active">
      <a href="#">
        <span></span>
      </a>
    </li>
    <li class="activity">
      <a href="#">
        <span></span>
      </a>
    </li>
  </ol>
</div>

#sidebar li span {
    display: block;
    height: 50px;
    margin-left: 5px;
    margin-right: 0;
    overflow: hidden;
    width: 50px;
    background: url('sidebar.png') no-repeat;
}

#sidebar li.profile span{
    background-position: 0 50px;
}

#sidebar li.following {
    background-position: 0 100px;
}

#sidebar li.activity img {
    background-position: 0 150px;
}