Question

我在某些标签下有一个指针图像，点击时会向相应的标签移动。这适用于Chrome和Firefox，但它在IE中不起作用。

小提琴在这里：JSFIDDLE

代码如下：

标签1 id = 1

Tab 2 id = 2

Tab 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'
});
});

Answer 1

使用此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;

    }

以上将使CSS3转换在IE中运行，我们可以根据需要调整它。

JQuery CSS转换在Chrome和Firefox中工作，但不是IE

1 个答案: