4
저는 Modernizr 2.6.2를 개발중인 사이트에서 사용하고 있으며 IE8에서 좌절감을 느끼고 있습니다. 나는 문서의 머리 모더 나이저를로드 해요 :IE8 및 Modernizr : 개체가이 속성 또는 메서드를 지원하지 않습니까?
<script src="js/vendor/modernizr-2.6.0-ck.js"></script>
그럼 난 그냥 닫는 </body> 태그 바로 앞에 페이지의 하단에 base.js 파일을로드하고 있습니다. 단지 Object doesn't support this property or method 말,
/**
* Non-jQuery hasClass function for checking the existence of
* class names on elements.
* @param {string} scripts The string of scripts to check
* @param {string} cls The class name we're looking for
* @return {boolean} True or false
*/
/*
function hasClass(scripts, cls) {
var r = new RegExp('\\b' + cls + '\\b');
return r.test(scripts);
}*/
/**
* Get ID from <body> tag
*/
function matchBodyID(match) {
return match.toLowerCase() === document.body.id.toLowerCase();
}
/**
* Check to see if the body tag has a "data-scripts" attribute.
* If true, collect the contents. If false, set to false.
*/
// var dataScripts = document.body.getAttribute("data-scripts") || false;
/**
* Variables must be defined before we can use them.
*/
var Modernizr = Modernizr || {},
ScaleText = ScaleText || {};
/*
* Using Modernizr.load, we can run our tests to see
* which features are available to us and load our
* polyfills to handle those that aren't
*/
var timestamp = new Date().getTime();
Modernizr.load([
{
load: [
'//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
'js/plugins/image-array-ck.js?t=' + timestamp,
'js/plugins/jquery.debouncedresize-ck.js',
'js/plugins/menu-ck.js?t=' + timestamp
],
complete: function() {
if (!window.jQuery) {
Modernizr.load('js/vendor/jquery-1.8.1.min.js');
}
ScaleText.invoke();
$("#skip-to-content").bind("click.menu", function (event) {
event.preventDefault();
var $this = $(this),
$par = $($this.parent());
$par.toggleClass("open");
});
}
}, {
test: matchBodyID('home') || matchBodyID('department'),
yep: [
'js/plugins/spin.min.js',
'js/slideshow-ck.js',
'css/royalslider/royalslider.css',
'css/royalslider/rs-minimal-white.css',
'js/plugins/tabs-ck.js?t=' + timestamp,
'js/plugins/underscore-min.js'
]
}, {
test: matchBodyID('interior'),
yep: [
'js/plugins/spin.min.js',
'js/plugins/tabs-ck.js?t=' + timestamp,
// 'js/plugins/menu-ck.js?t=' + timestamp,
'js/plugins/underscore-min.js'
]
},
// Check for iOS
{
test: Modernizr.appleios,
yep: [
'js/plugins/ios-ck.js'
]
},
// Functional polyfills
{
test: Modernizr.flexbox,
nope: ['js/polyfills/flexie.js']
}
]);
/*
* ScaleText
* An attempt to create a custom type scaler for
* large type that needs to scale to fit its parent
*/
ScaleText = {
invoke: function() {
$(".scalable").each(function (index, element) {
var $parent = $(element),
$wrapper = ScaleText.wrapIt($parent.first("div"));
$parent.css({
"overflow": "hidden",
"opacity": 0
});
$wrapper.css({
"-webkit-transform-origin": "left top",
"-moz-transform-origin": "left top",
"-ms-transform-origin": "left top",
"-o-transform-origin": "left top",
"transform-origin": "left top"
});
ScaleText.checkSize($parent, $wrapper);
jQuery(window).on("debouncedresize.ScaleText", function() {
ScaleText.checkSize($parent, $wrapper);
});
});
},
checkSize: function ($parent, $wrapper) {
var scrollWidth = $parent[0].scrollWidth,
width = $parent.width(),
scrollHeight = $parent[0].scrollHeight,
height = $parent.height(),
ratio, wRatio, hRatio;
wRatio = width/scrollWidth;
hRatio = height/scrollHeight;
ratio = (wRatio < hRatio) ? wRatio : hRatio;
$wrapper.css({
"-webkit-transform": "scale(" + ratio + ")",
"-moz-transform": "scale(" + ratio + ")",
"-ms-transform": "scale(" + ratio + ")",
"-o-transform": "scale(" + ratio + ")",
"transform": "scale(" + ratio + ")"
});
$parent.css({
"opacity": 1
});
},
wrapIt: function (element) {
var content = $(element).html(),
$wrapper = $("<div>" + content + "</div>");
$(element).empty().append($wrapper);
return $wrapper;
}
};
IE8 완전히 Modernizr.load 블록에 질식 몇 가지 이유 : 그 base.js 파일에서 다음 코드 (Hastebin link for readability)가 있습니다. 스크린 샷 첨부.
왜 이런 일이 일어날 지 생각해보십시오.
편집
나는 모더 나이저의 사용자 지정 빌드를 사용하고 언급해야한다 : 
이 작업을 수행 했습니까? 아주 똑같은 시나리오와 문제를 방금 넘었습니다. –
동일한 문제가 있습니다. – cbaigorri
IE9에서 같은 문제가 발생합니다. – ximi