IE10/11中伪元素Transform:translate定位偏移问题求助

这种IE特定的伪元素偏移问题我碰到过好几次，主要是IE对transform属性的渲染逻辑和现代浏览器有差异，再加上全局样式的影响，很容易出现这种细微的位置偏差。结合你的代码和补充的主题样式，给你几个针对性的解决方案：

方案一：用传统定位属性替换transform: translateY() #

IE10/11对绝对定位元素的transform计算存在精度问题，尤其是垂直方向的偏移。直接改用top/bottom属性来调整位置，兼容性会好很多：

.home .welcome-row h1 {
  position: relative;
  margin-bottom: 0;
}
.home .welcome-row h1:before {
  background-image: url('/wp-content/uploads/2017/10/welcome-line-1.png');
  /* 替换transform为top属性 */
  top: -23px;
  background-size: 260px 13px;
  background-repeat: no-repeat;
  width: 260px;
  height: 13px;
  content:"";
  position: absolute;
  display: block;
  /* 加上left:0确保水平位置对齐父元素 */
  left: 0;
}
.home .welcome-row h1:after {
  background-image: url('wp-content/uploads/2017/10/welcome-line-2.png');
  /* 用calc让伪元素在h1底部下方5px */
  top: calc(100% + 5px);
  background-size: 260px 13px;
  background-repeat: no-repeat;
  width: 260px;
  height: 13px;
  content:"";
  position: absolute;
  display: block;
  left: 0;
}

方案二：消除父元素的隐性布局影响 #

虽然你重置了h1的margin，但IE可能还会受line-height的隐性影响。给父元素h1明确设置line-height，避免垂直方向的额外空间干扰伪元素定位：

.home .welcome-row h1 {
  position: relative;
  margin-bottom: 0;
  /* 根据你的文字大小设置合适的line-height，比如1或者具体数值 */
  line-height: 1;
}

方案三：调整伪元素的box-sizing设置 #

全局的box-sizing: border-box可能在IE里导致伪元素的尺寸计算偏差，你可以单独给伪元素重置为content-box试试：

.home .welcome-row h1:before,
.home .welcome-row h1:after {
  box-sizing: content-box;
}

优先尝试方案一，这是解决IE transform偏移最直接有效的方法，替换后基本能消除5px左右的偏差。如果还存在问题，再结合方案二和三调整。 #

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