不能使用CSS calc（）和transform：translateX in IE

全部，不能使用CSS calc（）和transform：translateX in IE

我希望能夠在我的CSS中使用calc：translateX。

例如，

#myDiv { 
    -webkit-transform: translateX(calc(100% - 50px)); 
    -moz-transform: translateX(calc(100% - 50px)); 
    transform: translateX(calc(100% - 50px)); 
}

雖然這工作完全在Chrome，Safari瀏覽器和Firefox - 它不會在IE10和IE11工作。

這裏你可以看到一個簡單的例子：http://jsfiddle.net/SL2mk/9/

這是不可能的？它是IE中的錯誤，還是calc()不應該在這種情況下工作？

什麼是值得的 - 我讀here，你可以「疊加」translateX達到相同的效果，我的測試似乎證實了這一點。即，

#div { 
    transform: translateX(calc(100% - 50px)); 
}

是一樣的：

#div { 
    transform: translateX(100%) translateX(-50px); 
}

但我不知道這是否是這樣做的最好的，最可靠，面向未來的方式。

我也知道，這是可以使用left，而不是translateX，但後者是與過渡使用時更加順暢，因爲，據我所知，它會強制使用GPU來處理動畫。

在此先感謝您的建議和見解！

來源

2014-01-30 mattstuehler

[這是一個錯誤]（http://connect.microsoft.com/IE/feedback/details/762719/css3-calc-bug-inside-transition-or-transform），和[這個問題是一個騙局] （http://stackoverflow.com/questions/21142923/ie-10-11-css-transitions-with-calc-do-not-work）。只需使用兩個'translateX's，這是最好的方式 –

「我在這裏讀到你可以」堆棧「translateX」 - 你節省了我的一天。 – Elfayer

此：

transform: translateX(100%) translateX(-50px);

被編譯在分析時，但計算表達式這裏：

transform: translateX(calc(100% - 50px));

都有每個瀏覽器時需要該值的時間來解釋。表達式的結果可以被緩存，但我不會依賴瀏覽器來使用這種類型的優化。

因此，第一個更好的是a）它現在可以工作，b）是有效的，c）它將在將來工作，直到規範生效。

來源

2014-01-30 23:21:05

這是一個很好的解決方法，它解決了YUI CSS壓縮器沒有正確處理嵌套calc（）表達式的問題。謝謝！ – idungotnosn

這是迄今爲止我在很長一段時間裏對CSS學到的最有幫助的東西！ – nirazul

哇，這是奇特的！它對我來說真的很好。謝謝。 –

不能使用CSS calc（）和transform：translateX in IE

回答

相關問題