带有calc（）的CSS转换在IE10+；

我正在用CSS转换从右向左鼠标移动一个容器。这在除Internet Explorer之外的所有浏览器中都可以正常工作。原因是我在CSS left属性中使用（并且需要使用）calc（）

我在这里创建了一个现场演示：

CSS如下所示：

div {
    background: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 90%;
    -webkit-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
div.translate-less {
    left: calc(90% - 4rem)
}

我正在添加类。使用jQuery在鼠标悬停时减少翻译：

$(document)
.on( 'mouseenter', 'div', function(){
    $(this).addClass('translate-less')
})
.on( 'mouseleave', 'div', function(){
    $('div').removeClass('translate-less');
})

---

现在我想在Internet Explorer中平稳过渡。为此，我甚至会放弃这些特定浏览器的calc（），添加一条规则，如

left:85%。但是IE 10和11已经有了，而且似乎没有办法专门针对这些浏览器。IE10可以作为目标，但IE11不能。我不想检测浏览器，因为这似乎比使用CSS黑客更黑客。
也许
transform:translateX（）
可以提供解决方法。根据具体情况，使用变换和right属性可能会更好：

right: 10%;
transform: translateX(-4rem); 

以下是脚本的修改版本：

或者，虽然不能在IE中的
translateX（）
中使用
calc（）
（因为），但可以在转换中应用多个
translateX（）
s：

/* This */
transform: translateX(90%) translateX(-4rem);
/* is equivalent to this */
transform: translateX(calc(90% - 4rem));

（但是，在本例中，90%表示90%的目标，而不是父对象。）
仅使用left:85%有什么问题，因为它适用于所有浏览器？还有，为什么不直接使用.translate less:hover而不是在mouseover.Charles380上添加一个类呢？left:85%和left:90%-4rem之间存在显著差异。前者的滑动距离是相对的（宽视口大，窄视口小），而后者是绝对的。这恰好是我设计中的一个重要区别。（感谢：hover提示，但我需要在这里使用jQuery还有其他原因。基本上，我修改的元素比这个多，不能用：hover来定位这些元素。）哇。。。这是一个很好的答案！我有一个相关的问题-我想将calc（）与
translateX
一起使用，但尽管它在Chrome、Safari和Firefox中工作，但与IE不兼容。因此，在一次转换中使用多个
translateX
的解决方案非常方便！只是出于好奇-你知道为什么它在IE中不起作用吗？这不是规范的一部分，还是仅仅是一个bug？@mattstuehler那么，如果你需要90%的家长，而不是目标，那么解决方案是什么呢？我假设
正确：10%在您的上下文中不起作用。你对父母了解多少？它的宽度是隐式的还是显式的？在周围的环境中，你能知道或假设什么吗？或者更好的是，你有一个例子吗？谢谢！第二种解决方案是，如果对属性设置动画/进行变换，则性能会更高，因为
right
会触发重新绘制。