解决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;问题就可以解决了。
不要问我为什么这样就可以了，我也解释不出来啊。