13

我一直在努力尝试在 IE 8、7 和 6 上使用 rotate(xdeg) 功能，为此我谷歌了一段时间并找到了cssSandpaper但由于我必须加载 4 个不同的脚本我只想这样做如果它需要这个我使用modernizr我尝试这样的事情：

<head>

        <link rel="stylesheet" href="stilos/estilo.css" />
        <script src="scripts/modernizr.custom.19387.js"></script>
        <script src="scripts/jquery-1.8.1.js"></script>
        <script src="scripts/misfallbacks.js"></script>
</head>

<body>
    <div id="acerca"><a href="#">Acerca de mi</a></div>
</body>

我的 css 文件（estilo.css）：

#acerca{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    -sand-transform:rotate(90deg);
    position: relative;
    top: -233px;
    left: 462px;
    width: 123px;
    height: 23px;
    z-index:100;
}

我的 js 文件（misfallbacks.js）

Modernizr.load({
        test:Modernizr.csstransforms,
        nope:['transformie/EventHelpers.js/','transformie/cssQuery-p.js','transformie/sylvester.js','transformie/cssSandpaper.js']

    );//Fin de monernizr on load

它在 safari、chrome、opera、Firefox 和 IE9 上运行良好，但是当我在 IE8 或 IE7 上尝试时，我在控制台上收到以下错误，
SCRIPT5007: Unable to get value of the property 'addEventListener': object is null or undefined EventHelpers.js, line 49 character 9
我添加了一个 console.log 来尝试找出发生了什么并转到该行这里它是（EvenHelpers.js）：

me.addEvent = function(obj, evType, fn){
       console.log(obj);//I've added this to try to figure out what is going on
        if (obj.addEventListener) {........//here is the error

在下一次运行中，我再次检查了控制台，看到了这个LOG: null，我不是 javascript 专家，所以我不确定发生了什么，但我尝试了一些不同的东西，并使用这样的脚本标签添加了 cssSandPaper：

<head>

    <link rel="stylesheet" href="stilos/estilo.css" />

    <script src="scripts/modernizr.custom.19387.js"></script>
    <script src="scripts/jquery-1.8.1.js"></script>
    <!--<script src="scripts/misfallbacks.js"></script>-->  
    <script src="transformie/EventHelpers.js"></script>
    <script src="transformie/cssQuery-p.js"></script>
    <script src="transformie/sylvester.js"></script>
    <script src="transformie/cssSandpaper.js"></script>
 </head>

令我惊讶的是，它就像一个魅力，就像这样，即使在 IE7 和 IE8 中我也有旋转功能，控制台现在说这个LOG: [object HTMLScriptElement]但我知道使用这种方式我将始终加载这 4 个脚本，即使它们不是必需的，这不是我的目标，但由于我从modernizr 和javacript 开始，我不知道发生了什么D：以及为什么当我使用来自modernizr 的nope:[''] 加载脚本时不起作用. 有谁知道解决这个问题的方法？...对不起我的英语不是我的第一语言

编辑：我对这个对象 HTMLScriptElement 做了一些研究，它假设引用了一个脚本标签...但我仍然遇到同样的问题...我该如何解决这个问题？：/

jsFiddle 测试 Modernizr

没有 Modernizr 的 jsFiddle 测试

答：我最终使用if lt IE 9加载完成工作的砂纸脚本

4

3 回答 3

4

我试图用不同的更简单的方法来解决这个问题。它对我有用，我希望它也对你有用。

我包括了 IE9.JS（使 IE <9 浏览器表现得像 IE9 + 标准兼容的 js）。您可以访问此链接以了解如何操作。 http://code.google.com/p/ie7-js/

然后我稍微修改了你的CSSestilo.css如下。我将以下样式添加到您的#acerca 样式定义中。

filter:'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';

有效。唯一的问题是这种转换不像 -ms-transform 或任何其他标准 Web 转换那样可读。

于 2012-11-21T06:10:11.840 回答
0

似乎一个脚本需要在另一个之后加载。

试试这个脚本：

if (!Modernizr.csstransforms){
    Modernizr.load({
        load: 'transformie/EventHelpers.js',
        complete: function () {
            console.log("loaded EventHelpers");

            Modernizr.load({
                load: 'transformie/cssQuery-p.js',
                complete: function () {
                    console.log("loaded cssQuery");
                    Modernizr.load({
                        load: 'transformie/sylvester.js',
                        complete: function () {
                            console.log("loaded sylvester");

                            Modernizr.load({
                                load: 'transformie/cssSandpaper.js',
                                complete: function () {
                                    console.log("loaded cssSandpaper");
                                }
                            });

                        }
                    });
                }
            });

        }
    });

};
于 2012-10-15T17:36:21.000 回答
0

好吧，你给我买了半个小时，我在这个网站上坐了半个小时。init函数行 445 中的 EventHelpers.js 中有一个错误，它有一个 cc_on 语句，所以只有 ie 会阅读它。

现在它在运行时创建一个脚本标签，该标签没有创建，所以它等于空。并且代码中断了！

我修改了 EventHelpers.js 并修复了问题。原始代码编写脚本标签，document.write 我将其更改为document.createElement，它似乎在控制台上没有错误

jsfiddle：http: //jsfiddle.net/5xdDG/3/

现在它真的应该在 ie7 或 6 中旋转 div，因为在 jsfiddle 中我没有看到它旋转？

我很抱歉，英语不是我的第一语言；）

于 2012-10-09T22:57:52.217 回答