html - 绝对定位元素的子元素内的 Sprite 在 IE7 中消失

Question

我是新手，所以请多多包涵。我在相对容器内有一个绝对定位的框，在该框内我有另外两个 div，一个用于帖子，一个用于 Sprite 。 Sprite 在 IE7 中完全消失，连同“帖子”上的顶部(并且只有顶部)边框。这基本上就是它的样子。

 <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/

这似乎适用于除 IE7 之外的所有浏览器。

Answer 1

我必须在 IE10 中通过将本地文档上的浏览器/文档模式更改为 IE7/IE7 来执行此操作。我在该浏览器/文档模式下加载 jsfiddle 时遇到问题。我只更改了以下部分

#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;
}