IE 10 + 11：使用calc（）進行CSS轉換不起作用

我使用CSS轉換從右到左的鼠標懸停動畫容器。這適用於除Internet Explorer以外的所有瀏覽器。原因是我在我的CSS left屬性中使用（並需要使用）calc（）。IE 10 + 11：使用calc（）進行CSS轉換不起作用

我創建了一個現場演示在這裏：Live Demo

的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) 
}

我加入類.translate少鼠標懸停使用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有dropped support for conditional comments，似乎沒有辦法專門針對這些瀏覽器。 IE 10可以用-ms-high-contrast-hack作爲目標，但IE 11不能。我不想use JavaScript檢測瀏覽器，因爲這看起來甚至比使用CSS hack hackier。

任何幫助？提前致謝！

來源

2014-01-15 bootsmaat

剛剛使用左邊的問題是：85％，因爲它可以與所有瀏覽器一起使用？另外，爲什麼不使用.translate-less：懸停，而不是在鼠標懸停上添加一個類。 – Charles380

Charles380，左側85％，左側90％-4rem有顯着差異。前者的滑動距離是相對的（在寬視口上較大，在狹窄的視口上較小），而後者是絕對的。這恰好是我設計中的一個重要區別。（感謝：懸停提示，但我需要在這裏使用jQuery的其他原因。基本上，我修改更多的元素，而不僅僅是這個，不能以這些：hover。） – bootsmaat

也許transform: translateX()可以提供解決方法。根據具體情況，使用轉換，右邊的屬性可能會更好：

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

這裏是你的腳本的修改版本：http://jsfiddle.net/xV84Z/1/。

或者，而不能在IE中的translateX()內使用calc()（因爲a bug），則可以在變換應用多個translateX() S：

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

（然而，90％在這種情況下的裝置90％的目標，而不是父母。）

來源

2014-01-27 12:46:34

哇...這是一個很好的答案！我有一個相關的問題 - 我想用'translateX'使用calc（），但它在Chrome，Safari和Firefox中工作 - 它不適用於IE。因此，在單個轉換中使用** multiple **'translateX'的解決方案非常方便！出於好奇 - 你知道**爲什麼**它不適用於IE？這不是規範的一部分，還是隻是一個錯誤？ – mattstuehler

@mattstuehler [這是一個錯誤]（http://connect.microsoft.com/IE/feedback/details/762719/css3-calc-bug-inside-transition-or-transform） –

感謝您的回答！這爲我節省了一大筆努力。 – LandonSchropp

IE 10 + 11：使用calc（）進行CSS轉換不起作用

回答

相關問題