绝对定位元素的子元素中的精灵在IE7中消失

Question

I'm new at this so bear with me. I have an absolute positioned box inside a relative container and inside that box I've two other divs, one for posts and one for sprites. The sprites completely disappear in IE7 along with the top (and only the top) border on the "posts." This is basically what it looks like.

 <div id="wrapper">
  <div id="content">
    <div id="left"></div>
    <div id="right">
    <div id="icon">
        <a href="#" class="icon" id="email"></a>
    <a href="#" class="icon" id="twitter"></a>
    <a href="#" class="icon" id="rss"></a>
    </div><!--icon-->  
    <div id="posts">
     <div class="posts_border"></div>
     <!--a bunch of other stuff-->
     <div class="posts_border"></div>
    </div>
    </div><!--right-->
  </div><!--content-->
</div>

#wrapper{width:900px;margin-top:111px;margin-left:-450px;position:relative;left:50%;}
#content{background-color:#F6EFC9; position:relative; width:900px;height:965px;}
#left{padding-right:10px;width:550px;}
#right{position:absolute;top:0;right:20px;width:300px;}
#icon{margin:10px 0 0 -8px;top:0;right:20px;}
#icon .icon{margin-left:40px;width:50px;height:50px;float:left;}
#email{background:url("../images/icon-sprite.png")left 0 top -110px;}
#twitter{background:url("../images/icon-sprite.png") left 0 top -55px;}
#rss{background:url("../images/icon-sprite.png") left 0 top 3px;}
#posts{background:#E3C66E; margin-top:10px;position:absolute;top:66px;}
#right .posts_border{height:20px;background-color:#442503;}

http://jsfiddle.net/isherwood/aJwKJ/

This seems to work in every browser aside from IE7.

Answer 1

I had to do this in IE10 by changing my Browser/Document mode to IE7/IE7 on a local document. I had problems with jsfiddle loading in that browser/doc mode. I only changed the following sections

#email {
    background-image: url("http://placehold.it/32x32");
    background-position: 0 -110px;
}
#twitter {
    background:url("http://placehold.it/32x32");
    background-position:0,-55px;
}
#rss {
    background:url("http://placehold.it/32x32");
    background-position:0,3px;
}