Question

我在IE8中运行这段代码时遇到了麻烦。我不太确定，原因是什么，但似乎浏览器根本没有加载javascript。所有最近的浏览器都运行得很完美，遗憾的是代码也是IE8中需要支持的项目的一部分。

我期待着任何帮助，谢谢。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<style>
html{
overflow: hidden;
}
body{
background: url("pattern.jpg");
}
a{
width: 100%;
height: 100%;
display: inline-block;
}
div{
width: 262px;
height: 262px;
display: inline-block;
position: absolute;
}
div:hover{
opacity: 0.5;
z-index: 10;
}
#square11{
width: 262px;
height: 324px;
background: url("square11.png");
top:-200px;
left:-200px;
z-index: 1;
}
#square12{
width: 386px;
height: 262px;
background: url("square12.png");
top:-200px;
left:50%;
z-index: 2;
}
#square13{
width: 262px;
height: 324px;
background: url("square13.png");
top:-200px;
left:100%;
z-index: 3;
}
#square21{
width: 324px;
height: 262px;
background: url("square21.png");
top:100%;
left:-200px;
z-index: 4;
}
#square22{
width: 262px;
height: 324px;
background: url("square22.png");
top:100%;
left:50%;
z-index: 5;
}
#square23{
width: 324px;
height: 262px;
background: url("square23.png");
top:100%;
left:100%;
z-index: 6;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
</head>
<body>

<div id="square11">
<a href=""></a>
</div>

<div id="square12">
<a href=""></a>
</div>

<div id="square13">
<a href=""></a>
</div>

<div id="square21">
<a href=""></a>
</div>

<div id="square22">
<a href=""></a>
</div>

<div id="square23">
<a href=""></a>
</div>

<script type="text/javascript">
$(document).ready(function() {
w = window.innerWidth / 2;
h = window.innerHeight / 2;

$("#square11").animate({'position': "absolute", 'top': h - 262, 'left': w - 393}, 1000);
$("#square12").animate({'position': "absolute", 'top': h - 262, 'left': w - 193}, 1000);
$("#square13").animate({'position': "absolute", 'top': h - 262, 'left': w + 131}, 1000);
$("#square21").animate({'position': "absolute", 'top': h - 2, 'left': w - 393}, 1000);
$("#square22").animate({'position': "absolute", 'top': h - 64, 'left': w - 131}, 1000);
$("#square23").animate({'position': "absolute", 'top': h - 2, 'left': w + 68}, 1000);
});
</script>

</body>
</html>

Answer 1

这是因为window.innerHeight和window.innerWidth在IE8及更早版本中不起作用here。

您可以使用$(window).height()和$(window).width()。

Answer 2

IE8 不支持window.innerHeight和window.innerWidth属性。

使用以下等价物：

var w = document.body.clientWidth / 2;
var h = document.body.clientHeight / 2;

为什么这段代码在IE8中不起作用

2 个答案: