Modernizr与cssSandpaper？
[英]Modernizr with cssSandpaper?
问题描述
我一直在努力尝试在IE 8,7和6上使用旋转（xdeg）功能，为此我谷歌一段时间找到了cssSandpaper但是因为我必须加载4个不同的脚本我只想做它如果它是必要的im使用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：[对象HTMLScriptElement]但我知道使用这种方式我将始终加载这4个脚本，即使它们不是必需的，这不是mi的目标但是因为我从现代化和javacript开始成为hones我不知道D上发生了什么：为什么当我使用nope加载脚本时：['']来自modernizr不起作用。 有谁知道解决这个问题的方法？ ...对不起我的英语而不是我的第一个语言
编辑：我对这个对象HTMLScriptElement进行了一些研究，并假设它引用了一个脚本标签，我想当我用nope加载js文件时：from modernizr会发生一些变化，这个对象变为null，因为不再在脚本标签内加载...但我仍然处于同样的问题......我该如何解决这个问题？ ：/
答：我最终使用了如果IE 9加载沙纸脚本它完成了工作
3 个解决方案
解决方案1
4 已采纳 2012-11-21 06:10:11
我试图用不同的方法解决这个问题。 它对我有用，我希望它也适合你。
我包括IE9.JS（使IE <9浏览器行为符合IE9 +标准的js）。 您可以访问此链接以了解如何执行此操作。 http://code.google.com/p/ie7-js/
然后我稍微修改了你的CSS estilo.css如下。 我将以下样式添加到#acerca样式定义中。
filter:'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
有效。 唯一的问题是这种转换不像-ms-transform或任何其他标准Web转换那样可读。
解决方案2
0 2012-10-09 22:57:52
好吧，你给我买了我就这样坐了半个小时，在init函数行445中的EventHelpers.js中有一个错误，它有一个cc_on语句，所以只会读取它。
现在它在运行时创建一个脚本标记，标签未创建，因此它等于null。 并且代码是破碎的！
我修改了EventHelpers.js并修复了问题。 原始代码使用document.write编写脚本标记我将其更改为document.createElement ，它似乎没有工作在consloe的错误
jsfiddle： http ： //jsfiddle.net/5xdDG/3/
现在它真的应该旋转div即使在ie7或6，因为在jsfiddle我没有看到它旋转？
我很抱歉，英语不是我的第一语言;）
解决方案3
0 2012-10-15 17:36:21
似乎一个脚本需要加载另一个脚本。
试试这个脚本：
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");
}
});
}
});
}
});
}
});
};
CssSandpaper库错误-规则对象为空
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.