首页 > IE11下的奇怪的background-image错位问题

IE11下的奇怪的background-image错位问题

直接上图.....下图为在chrome,FF,safari,opera的显示情况

奇怪的事情来了..在IE11下,第一个文章块下的那个时间icon向下错位,而第二个文章块下同样的icon却向上错位。更奇怪的是,我多复制了两个文章块,发现第三和第四个文章块的同一icon错位情况和第一个文章块是一样的,就唯独第二个文章块是向上错位,再贴上两张图和代码。不知道有没有人遇到过,求解决方法。

下图为IE11下第一和第二个文章块的情况

下图为IE11下第一个文章块的完整情况

下图为IE11下第二个文章块的完整情况

html:

<div class="entry-footer">     
 <span><em class="icon i-post-date"></em>2013.03.04</span>     
 <span><em class="icon i-post-user"></em>yneear</span>   
 <span><em class="icon i-post-acr"></em>归档</span>   
 <span><em class="icon i-post-tag"></em>标签</span>   
</div>

css:

.icon{   
    width: 16px;    
    height: 16px;     
    display: inline-block;    
    background-image: url("img/icon.png");   
    background-repeat: no-repeat;    
    margin-right: 6px;    
}    
.i-post-date{     
    background-position: 0px 0px;    
}     
.i-post-user{    
    background-position: -16px 0px;    
}    
.i-post-acr{    
    background-position: -32px 0px;    
}    
.i-post-tag{    
    background-position: -48px 0px;     
}

目测你的IE11的视图有缩小一级。改成100%缩放应该就OK了。
以px定位bg-position的时候在缩放时多少会有点切边,就看浏览器怎么渲染了,chrome下也会出现的。

【热门文章】
【热门文章】