JQuery CSS轉換在Chrome和Firefox中使用但不是IE

我有一些指向一個標籤的指針圖像，當點擊時它會移向各自的標籤。這適用於Chrome和Firefox，但在IE中不起作用。JQuery CSS轉換在Chrome和Firefox中使用但不是IE

的小提琴是在這裏：JSFIDDLE

的代碼如下，其中：

標籤1個ID = 1

標籤2的ID = 2

選項卡3 ID = 3

$('#1').click(function(){ 
$('#triangle-tab').css({ 
    '-webkit-transform' : 'translateX(-330px)', 
    '-moz-transform' : 'translateX(-330px)', 
    '-ms-transform' : 'translateX(-330px)', 
    'transform' : 'translateX(-330px)', 
    '-webkit-transition-duration' : '.5s', 
    '-moz-transition-duration' : '.5s', 
    '-ms-transition-duration' : '.5s', 
    'transition-duration' : '.5s' 
}); 
}); 

$('#2').click(function(){ 
$('#triangle-tab').css({ 
    '-webkit-transform' : 'translateX(0px)', 
    '-moz-transform' : 'translateX(0px)', 
    '-ms-transform' : 'translateX(0px)', 
    'transform' : 'translateX(0px)', 
    '-webkit-transition-duration' : '.5s', 
    '-moz-transition-duration' : '.5s', 
    '-ms-transition-duration' : '.5s', 
    'transition-duration' : '.5s' 
}); 
}); 

$('#3').click(function(){ 
$('#triangle-tab').css({ 
    '-webkit-transform' : 'translateX(330px)', 
    '-moz-transform' : 'translateX(330px)', 
    '-ms-transform' : 'translateX(330px)', 
    'transform' : 'translateX(330px)', 
    '-webkit-transition-duration' : '.5s', 
    '-moz-transition-duration' : '.5s', 
    '-ms-transition-duration' : '.5s', 
    'transition-duration' : '.5s' 
}); 
});

來源

2015-01-16 A.Sharma

關於你的'a：focus {outline：none; }規則：http://www.w3.org/TR/WCAG20-TECHS/F78.html – danielnixon

哪個IE版本？，它似乎是一個問題加載jQuery的FIDDLE（IE11）試試這個： http://jsfiddle.net/hLkkzbqq/4/ – kamus

檢查瀏覽器的兼容性。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions#Browser_compatibility IE10及以上瀏覽器支持transition-duration –

使用此converter，我們得到這個代碼：

 #transformedObject { 
     width:    220px; 
     height:   70px; 

     -moz-transform: translateX(-330px); 
     -o-transform:  translateX(-330px); 
     -webkit-transform: translateX(-330px); 
     transform:   translateX(-330px); 
    } 

    /* 
    * The following two rules are for IE only and 
    * should be wrapped in conditional comments. 
    * The -ms-filter rule should be on one line 
    * and always *before* the filter rule if 
    * used in the same rule. 
    */ 

    #transformedObject { 

     /* IE8+ - must be on one line, unfortunately */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')"; 

     /* IE6 and 7 */ 
     filter: progid:DXImageTransform.Microsoft.Matrix(
       M11=1, 
       M12=0, 
       M21=0, 
       M22=1, 
       SizingMethod='auto expand'); 


     /* 
     * To make the transform-origin be the middle of 
     * the object. Note: These numbers 
     * are approximations. For more accurate results, 
     * use Internet Explorer with this tool. 
     */ 
     margin-left: -387px; 
     margin-top: -3px; 

    }

以上將得到在IE中工作的CSS3變換，我們可以調整它，因爲我們認爲合適。

來源

2015-01-16 05:04:21

@ A.Sharma是否解決了您的問題？ –

JQuery CSS轉換在Chrome和Firefox中使用但不是IE

回答

相關問題