IE11中calc()过渡失效，能否用transform:translate()实现动态位移？

当然可以用 transform: translate() 来实现这个需求，而且完美解决IE11对 calc() 过渡支持的bug！

我之前也遇到过类似的问题——IE11对 left: calc() 搭配过渡的支持特别差，换成transform之后就完全正常了。针对你的场景，具体实现可以这样做：

核心思路 #

你的需求是让span在div宽度变化时，自动调整位置（对应原来 left: calc(100% - 10px) 的效果），我们可以用「绝对定位 + transform」的组合替代calc，同时保证过渡在IE11里正常工作：

1. 让span的左边缘先对齐div的右边缘（left: 100%）
2. 用 transform: translateX(-100%) 让span向左移动自身宽度的距离（这里的100%是相对于span自身的，刚好对应你说的10px宽度），这样span的右边缘就会和div的右边缘完全对齐，和原来calc的效果一模一样。
3. 给transform添加过渡，IE11对transform的过渡支持非常稳定。

代码示例 #

<div class="parent-div">
  <span class="target-span"></span>
</div>

.parent-div {
  position: relative;
  width: 200px; /* 初始宽度 */
  height: 50px;
  background: #eee;
  /* 如果div宽度是动态变化的（比如hover、JS修改），给宽度加过渡 */
  transition: width 0.05s;
}

/* 模拟div宽度增加的场景 */
.parent-div:hover {
  width: 300px;
}

.target-span {
  position: absolute;
  left: 100%;
  width: 10px;
  height: 50px;
  background: #f44336;
  /* 用transform替代calc实现位置调整 */
  transform: translateX(-100%);
  /* 给transform添加过渡，IE11完美支持 */
  transition: transform 0.05s;
}

额外扩展 #

如果你的需求不是让span紧贴div右边缘，而是要保持固定间距（比如span右边缘距离div右边缘10px），只需要调整transform的值即可：

.target-span {
  /* ...其他样式不变 */
  transform: translateX(-(100% + 10px));
}

这种方式完全避开了calc，同时利用transform的相对特性，还能让你的代码更灵活——哪怕之后span宽度变化，也不用手动修改数值，translateX(-100%)会自动适配。

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