您好,匿名用户
随意问技术百科期待您的加入

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

0 投票

想要在浏览器左侧固定一个导航栏,宽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;
}
用户头像 提问 2014年 6月7日 @ Jarvan IV 上等兵 (203 威望)
分享到:

1个回答

0 投票
 
最佳答案

用雪碧图来做吧。

<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;
}
用户头像 回复 2014年 6月7日 @ Redis 上等兵 (114 威望)
选中 2013年 9月7日 @Jarvan IV
提一个问题:

相关问题

+2 投票
1 回复 46 阅读
用户头像 提问 2013年 1月6日 @ Zed 上等兵 (260 威望)
0 投票
1 回复 34 阅读
用户头像 提问 2012年 12月1日 @ Zeus 上等兵 (193 威望)
0 投票
1 回复 27 阅读
0 投票
1 回复 39 阅读
用户头像 提问 2013年 11月4日 @ Thresh 上等兵 (138 威望)
0 投票
1 回复 34 阅读

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...