解决IE6,IE7不能隐藏绝对定位溢出的内容

最近在做项目时遇到一个奇怪的样式问题，因为刚换了工作， 新公司的分工比较细，所以我也很少写样式了。现在遇到这样的问题，记录一下。
关于这个问题，是在IE6和IE7下才会有的，万恶的IE啊。
先看代码:

CSS:

#wrap {
    width: 1000px;
    height: 500px;
    margin: 0 auto;
    border: 1px solid red;
    overflow: hidden;
}
#box {
    width: 100px;
    height: 30px;
    background: #EEE;
    position: relative;
 }
#inner{
    width: 50px;
    height: 15px;
    position: absolute;
    left: -10px;
    top: 0px;
    background: red;
    z-index: 12;
}

HTML:

<div id="wrap">
    <div id="box">
        <div id="inner"></div>
    </div>
</div>

在IE6和IE7下面可以看到，#inner层可以溢出，#wrap层明明设置了overflow:hidden;
写CSS是没有多少理论可以说得明白这是什么回事，工作那么久以来，发现各浏览器都慢慢都有各自的标准。
可怜我们这些前端工程师，而且还被很多人认为做前端是一件容易事。
那么又有前端或后端程序员能说得明白上面的问题呢。
多余的话不说太多了，先说这个问题如何解决。
给#wrap层也加上一个position:relative;问题就可以解决了。
不要问我为什么这样就可以了，我也解释不出来啊。