css隐藏overflow:scroll出现的滚动条

没有兼容性问题！没有兼容性问题！没有兼容性问题！

<div class="out_container">
    <ul class="list_container">
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
    </ul>
</div>

假设，list_container是需要内容滚动的，如果用css实现，必然会用到overflow:scroll这个属性，如果用js就另当别论了。
如何将出现的scroll滚动条隐藏呢？
假设滚动的区域宽和高ui给的是300*200，接下来看css代码

.out_container{
    width:300px;
    height:200px;
    overflow:hidden;
}
.list_container{
    width:330px;
    height:220px;
    overflow:scroll;
}

将list_container的宽和高都超出外面容器，由于外层有overflow:hidden属性，正好把内层出现的滚动条给隐藏住了，如果担心每个浏览器的滚动条宽高不一样，可将list_container的宽高值设置大一些也不会影响到其他内容。