子彈內絕對定位的元素的孩子在IE7中消失

Question

我是新來的，所以忍受着我。我有一個絕對定位的盒子在一個相對的容器裏面，在那個盒子裏我有兩個其他的div，一個用於貼子，另一個用於精靈。精靈在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; 
}