絕對定位元素的子元素中的精靈在IE7中消失

Question

我對此很陌生，請耐心等待。 我在相對容器中有一個絕對定位的框，在該框內還有另外兩個div，一個用於發布，另一個用於精靈。 這些精靈與IE 7的頂部（也只有頂部）邊框一起完全消失了。 這基本上就是它的樣子。

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