简体   繁体   中英

Sprites inside the child of an absolute positioned element disappear in IE7

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.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM