Javascript 为什么此代码没有'；我不在IE8工作_Javascript_Jquery_Html_Css_Internet Explorer 8

Javascript 为什么此代码没有'；我不在IE8工作

javascript jquery html css internet-explorer-8

Javascript 为什么此代码没有'；我不在IE8工作,javascript,jquery,html,css,internet-explorer-8,Javascript,Jquery,Html,Css,Internet Explorer 8,我在IE8中运行这段代码时遇到问题。我不是很确定，原因是什么，但看起来，浏览器根本没有加载javascript。所有最新的浏览器都能完美地运行它，不幸的是，该代码参与了一个需要IE8支持的项目我期待任何帮助，谢谢 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>css demo</title> <style> html{

我在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>


css演示
html{
溢出：隐藏；
}
身体{
背景：url（“pattern.jpg”）；
}
a{
宽度：100%；
身高：100%；
显示：内联块；
}
div{
宽度：262px；
高度：262px；
显示：内联块；
位置：绝对位置；
}
div:悬停{
不透明度：0.5；
z指数：10；
}
#正方形11{
宽度：262px；
高度：324px；
背景：url（“square11.png”）；
顶部：-200px；
左：-200px；
z指数：1；
}
#平方12{
宽度：386px；
高度：262px；
背景：url（“square12.png”）；
顶部：-200px；
左：50%；
z指数：2；
}
#平方13{
宽度：262px；
高度：324px；
背景：url（“square13.png”）；
顶部：-200px；
左：100%；
z指数：3；
}
#平方21{
宽度：324px；
高度：262px；
背景：url（“square21.png”）；
最高：100%；
左：-200px；
z指数：4；
}
#平方22{
宽度：262px；
高度：324px；
背景：url（“square22.png”）；
最高：100%；
左：50%；
z指数：5；
}
#平方23{
宽度：324px；
高度：262px；
背景：url（“square23.png”）；
最高：100%；
左：100%；
z指数：6；
}
$（文档）.ready（函数（）{
w=窗内宽度/2；
h=窗内高度/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）；
});
这是因为window.innerHeight
和window.innerWidth
在IE8和早期版本中不起作用
您可以使用$（窗口）.height（）
和$（窗口）.width（）
IE8不支持窗口.innerHeight
和窗口.innerWidth
属性
使用以下等效项：
var w = document.body.clientWidth / 2;
var h = document.body.clientHeight / 2;

创建复制此问题的JSFIDLE。为什么要加载两次jQuery？@Barmar-这只是以防万一，安全总比抱歉好！你试过调试器了吗？@mvw-lol，很好！理论上这是可行的。无论如何，在这种情况下，变量h返回0，因为在主体中除了绝对定位的div之外，没有其他东西。