直接上图.....下图为在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下也会出现的。