如何在IE的jQuery CSS中使用HTC行为?

时间:2011-05-20 05:53:03

标签: jquery html css

我一直在尝试使用jQuery创建旋转对象,而不使用任何其他插件。在这个link中,我看到了完美的方式使它跨浏览器而不需要太多计算。但是当它使用它时就像这样------

    div#test {
        behavior:url(resource/-ms-transform.htc);
        -ms-transform:rotate(45deg);
        background:#333;
        color:#fff;
        padding:5px 5px;
        width:200px;
        height:auto;
    }

但是像这样的jQuery CSS --------

    $(document).ready(function () {
      $('div#test').css({
        '-ms-transform':'rotate(45deg)'
      });
    });

它似乎没有在jQuery CSS模式下工作,但是使用正常的CSS模式它似乎工作得很好!任何人都可以解释为什么会发生这种情况并为我提供解决方案(注意:我不想要这个解决方案的任何jQuery插件!)。

这是我的整个页面------

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
              <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
              <script type="text/javascript" src="jquery-1.6.min.js"></script>
              <script type="text/javascript">
                      $(document).ready(function () {
                         $('div#test').css({
                            '-ms-transform':'rotate(45deg)',
                            '-moz-transform':'rotate(45deg)',
                            '-o-transform':'rotate(45deg)',
                            '-webkit-transform':'rotate(45deg)',
                            '-khtml-transform':'rotate(45deg)'
                         });
                      });
              </script>
              <style type="text/css">
        div#test    {
            behavior:url(resource/-ms-transform.htc);
            background:#333;
            color:#fff;
            padding:5px 5px;
            width:200px;
            height:auto;
        }
               </style>
       </head>
       <body>
             <div id="test">This is a test!</div>
       </body>
</html>

2 个答案:

答案 0 :(得分:1)

我不知道有问题的HTC文件(从中获取该文件的链接将是对该问题的方便编辑),但我熟悉其他HTC,例如CSS3Pie

我对'行为'的工作方式的理解是,行为本身仅在元素触发样式表时运行 - 即通常仅在页面加载时,或者如果您更改元素的类。

使用CSS3Pie的例子,使其比以前完成相同工作的HTC更好的一个关键因素是它还设置了Javascript事件,这些事件可以观察任何变化的元素,并保持行为特征达到-日期。但这并不是大多数HTC所做的功能。

如果不了解更多有关此特定HTC的内容,我无法确定这是否是问题,但我的猜测是它完成初始转换工作后根本没有任何代码来跟踪项目。< / p>

如果是这种情况,您可能会发现调整-ms-transform样式不会产生任何影响。在这种情况下,我可以建议的唯一选择是拥有一系列具有所需旋转的类,并使用JQuery在这些类之间切换;应该触发behavior运行。

答案 1 :(得分:0)

我的jQuery有点生疏,但这不应该更像是这样吗?

$(document).ready(function () {
  $('div#test').css('-ms-transform:rotate(45deg)');
});

(作为字符串,而不是json。)