我在may页面有如下代码
var x = parseInt($(this).css('backgroundPosition').split(" ")[0]);
在 IE9 和 FF 和 Chrome 中一切正常,即使是 Iphone 但 IE8 和 IE7 抛出错误,我调试问题是 .css 方法无法解析该属性。
我在页面底部使用的 document.ready 函数似乎在将 css 应用于元素之前加载此代码,在这种情况下,这是一个 td 表元素
关于如何优雅地解决这个问题的任何想法
谢谢
最佳答案
我使用 jQuery 在 backgroundPosition
(和 background-position
)属性上得到了 undefined
。
如果您单独引用 X 和 Y,看起来确实可以在 IE 中访问 background-position
中的 X 和 Y:
<html>
<head>
<style type="text/css">
body {
background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG);
background-repeat: no-repeat;
background-position: 100px 500px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<p>Test of doc.ready and bg pos in IE8/9</p>
<script>
$(document).ready(function(){
if ($.browser.msie) {
console.log('X: ' + $('body').css('backgroundPositionX'));
console.log('Y: ' + $('body').css('backgroundPositionY'));
} else {
console.log('X: ' + parseInt($('body').css('backgroundPosition').split(" ")[0]));
console.log('Y: ' + parseInt($('body').css('backgroundPosition').split(" ")[1]));
}
});
</script>
</body>
</html>
在 IE7/8 中(使用 IE9 控制台):
LOG: X: 100px
LOG: Y: 500px
http://jfcoder.com/test/bgpos.html
但是,它似乎在 Firefox 中不起作用(不输出任何内容)。所以我调整了检测IE的代码。
关于Jquery document.ready 事件在我的元素 css 样式加载到 IE8 之前触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7301787/