绝对定位背景图CSS在Chrome、Firefox、Edge正常居中但IE11失效的解决方法咨询

嘿，我之前也遇到过IE11这种特立独行的兼容性问题，别担心，咱们很快就能搞定它！

问题原因 #

IE11对background-position-x和background-position-y这两个拆分属性的支持存在兼容性问题，尤其是使用center这类关键字值时，很容易出现定位异常的情况——这就是你的图片在IE11里跑到右侧的原因。

修复方案 #

我们可以用兼容性更好的完整background-position属性来替代拆分写法，IE11对这个属性的支持非常稳定。有两种等价的写法都能生效：

方案1：使用关键字值（更直观）

把原来的background-position-x: center;替换成background-position: center;（或者background-position: center center;，第二个值默认是center，写不写都可以）：

.MasImg {
    position: absolute;
    top: -25px;
    width: 100px;
    height: 60px;
    background-image: url('../images/pm_image.png');
    background-position: center; /* 替换原来的background-position-x */
    background-repeat: no-repeat; /* 可选：如果只需要显示一次背景图，建议加上这个 */
}

方案2：使用百分比值（兼容性拉满）

center关键字等价于50%，用百分比值的话在所有浏览器（包括IE11）里的表现完全一致，非常稳妥：

.MasImg {
    position: absolute;
    top: -25px;
    width: 100px;
    height: 60px;
    background-image: url('../images/pm_image.png');
    background-position: 50%; /* 或者 50% 50% */
    background-repeat: no-repeat;
}

验证效果 #

替换之后，不管是Chrome、Firefox、Edge还是IE11，背景图都会乖乖地在.MasImg容器里居中显示啦！

内容的提问来源于stack exchange，提问作者vim