Question

我是新来的，所以请耐心等待。我在一个相对容器内有一个绝对定位的盒子，在那个盒子里面我有另外两个div，一个用于帖子，一个用于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来完成此操作。我在浏览器/ doc模式下加载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;
}

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

1 个答案: