这个jQuery代码适用于除IE8之外的所有浏览器。当我点击IE8中页面上的任何地方时，无论是在链接，div还是仅在白色空间中，它都会激活滚动事件。我认为这是一个传播问题，我把它钉在一个特定的jQuery块上（参见下面jQuery中的注释），但我不确定如何更改它以便它在IE8中正常工作。显然，只有在单击所选元素时才会滚动。
jQuery的：
$(".scroll, .tobottom, .video-cta").on("click",function(e){
e.preventDefault();
var target = "#" + $(this).data("target") + " h1";
$("html, body").animate({
scrollTop: $(target).offset().top
}, {duration: 2000, easing: "easeInOutQuint"});
});
HTML
<!DOCTYPE html>
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Blah blah blah</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic,700italic|Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
<![endif]-->
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<link href="video-js/video-js.css" rel="stylesheet">
<script src="video-js/video.js"></script>
<script>
videojs.options.flash.swf = "video-js/video-js.swf";
</script>
<style type="text/css">
/* Video */
.videocontent {width: 100%; max-width: 640px;}
.video-js {padding-top: 56.25%;}
.vjs-fullscreen {padding-top: 0px;}
</style>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56802153-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<header class="gradient">
<div class="wrap">
<div class="logo">
<a class="top" href="index.html">Blah blah blah</a>
</div>
<div class="subheading">
<p><i>Blah blah blah</i></p>
<a class="tobottom" href="#" data-target="stayconnected" onClick="_gaq.push(['_trackEvent', 'Navigation', 'Home', 'Register for Updates']);">Register for updates</a>
</div>
</div>
</header>
<div class="pages">
<section class="deeper wrap">
<div class="heading-hr">
<h1>Blah blah blah</h1>
<hr>
</div>
<p>Blah blah blah</p>
<p>Blah blah blah</p>
<div class="heading-hr">
<h2>Are <b>you</b> ready?</h2>
<hr>
</div>
<div class="scroll with-heading" id="container-video" data-target="videoseries">
<p class="start-exploring">Start Exploring</p>
<div id="allArrows-video">
<img src="img/scroll/arrow1.png" id="arrow1-video" class="arrow-video" />
<img src="img/scroll/arrow2.png" id="arrow2-video" class="arrow-video" />
<img src="img/scroll/arrow3.png" id="arrow3-video" class="arrow-video" />
<img src="img/scroll/arrow4.png" id="arrow4-video" class="arrow-video" />
</div>
<div id="allBubbles-video">
<img src="img/scroll/bubble1.png" id="bubble1-video" class="bubble-video" />
<img src="img/scroll/bubble2.png" id="bubble2-video" class="bubble-video" />
<img src="img/scroll/bubble3.png" id="bubble3-video" class="bubble-video" />
<img src="img/scroll/bubble4.png" id="bubble4-video" class="bubble-video" />
<img src="img/scroll/bubble5.png" id="bubble5-video" class="bubble-video" />
</div>
<div>
</section>
<section id="videoseries" class="videoseries wrap">
<h1>Blah blah blah</h1>
<div class="video">
<div class="videocontent">
<video id="promo-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload width="auto" height="auto" poster="video/video-series/promo.jpg" data-setup='{"techOrder": ["flash", "html5"]}'>
<source src="video/video-series/promo.mp4" type='video/mp4' />
<source src="video/video-series/promo.webm" type='video/webm' />
<source src="video/video-series/promo.ogv" type='video/ogg' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<script>
//reference the player
var myPlayer = videojs("promo-video");
//provide a name for the Events
var videoTitle = "Blah blah blah";
</script>
</div>
</div>
<div class="videodescription">
<h2>Blah blah blah</h2>
<p>Blah blah blah</p>
<a class="button video-cta" href="#" data-target="stayconnected" onClick="_gaq.push(['_trackEvent', 'Button', 'Home', 'Sign up to stay informed']);">Sign up to stay informed</a>
</div>
<div id="container-address" class="scroll" data-target="addresschallenges">
<div id="allArrows-address">
<img src="img/scroll/arrow1.png" id="arrow1-address" class="arrow-address" />
<img src="img/scroll/arrow2.png" id="arrow2-address" class="arrow-address" />
<img src="img/scroll/arrow3.png" id="arrow3-address" class="arrow-address" />
<img src="img/scroll/arrow4.png" id="arrow4-address" class="arrow-address" />
</div>
<div id="allBubbles-address">
<img src="img/scroll/bubble1.png" id="bubble1-address" class="bubble-address" />
<img src="img/scroll/bubble2.png" id="bubble2-address" class="bubble-address" />
<img src="img/scroll/bubble3.png" id="bubble3-address" class="bubble-address" />
<img src="img/scroll/bubble4.png" id="bubble4-address" class="bubble-address" />
<img src="img/scroll/bubble5.png" id="bubble5-address" class="bubble-address" />
</div>
<div>
</section>
<section id="addresschallenges" class="addresschallenges wrap">
<h1>Blah blah blah</h1>
<div class="challenges">
<div class="ie-left"><p>Blah blah blah</p></div>
<div class="ie-middle"><p>Blah blah blah</p></div>
<div class="ie-right"><p>Blah blah blah</p></div>
</div>
<div id="container-connected" class="scroll" data-target="stayconnected">
<div id="allArrows-connected">
<img src="img/scroll/arrow1.png" id="arrow1-connected" class="arrow-connected" />
<img src="img/scroll/arrow2.png" id="arrow2-connected" class="arrow-connected" />
<img src="img/scroll/arrow3.png" id="arrow3-connected" class="arrow-connected" />
<img src="img/scroll/arrow4.png" id="arrow4-connected" class="arrow-connected" />
</div>
<div id="allBubbles-connected">
<img src="img/scroll/bubble1.png" id="bubble1-connected" class="bubble-connected" />
<img src="img/scroll/bubble2.png" id="bubble2-connected" class="bubble-connected" />
<img src="img/scroll/bubble3.png" id="bubble3-connected" class="bubble-connected" />
<img src="img/scroll/bubble4.png" id="bubble4-connected" class="bubble-connected" />
<img src="img/scroll/bubble5.png" id="bubble5-connected" class="bubble-connected" />
</div>
<div>
</section>
<section id="stayconnected" class="stayconnected">
<h1>Stay <b>connected</b> to the latest news</h1>
<div class="form">
<div class="wrap">
<form class="cmxform" id="scForm" method="post" action="" pageId="4648716" siteId="147979" parentPageId="4648715">
<p class="join-us">Blah blah blah</p>
<div class="personal-info-test">
<div class="ie-left">
<div class="table-field">
<div class="first-row">
<div id="firstName-error"></div>
</div>
<div class="last-row">
<div>
<label class="hide" for="firstName">First name</label><input type="text" name="firstName" id="firstName" placeholder="First name"> <span>*</span>
</div>
</div>
</div>
</div>
<div class="ie-middle">
<div class="table-field">
<div class="first-row">
<div id="lastName-error"></div>
</div>
<div class="last-row">
<div>
<label class="hide" for="lastName">Last name</label><input type="text" name="lastName" id="lastName" placeholder="Last name"> <span>*</span>
</div>
</div>
</div>
</div>
<div class="ie-right">
<div class="table-field">
<div class="first-row">
<div id="email-error"></div>
</div>
<div class="last-row">
<div>
<label class="hide" for="email">Email address</label><input type="email" name="email" id="email" placeholder="Email address"> <span>*</span>
</div>
</div>
</div>
</div>
</div>
<p class="required-fields">* Required fields</p>
<p class="agreement">Blah blah blah</p>
<input type="hidden" name="formSourceName" value="StandardForm">
<input type="hidden" name="sp_exp" value="yes">
<div class="submit-button"><input type="submit" value="Register for Updates" onClick="_gaq.push(['_trackEvent', 'Button', 'Register for Updates', 'Register for Updates']);"></div>
</form>
</div>
</div>
</section>
<section class="footer-home wrap">
<footer>
<p class="text-center"><img src="img/logo-blah-large.png" alt="Blah logo"></p>
<p>Blah blah blah</p>
<nav>
<ul>
<li><a href="tos.html" onClick="_gaq.push(['_trackEvent', 'Navigation', 'Home', 'Terms of Use']);">Terms of Use</a></li>
<li><a href="privacy.html" onClick="_gaq.push(['_trackEvent', 'Navigation', 'Home', 'Privacy Policy']);">Privacy Policy</a></li>
</ul>
</nav>
<p class="trademark">Blah blah blah</p>
<p>Blah blah blah</p>
</footer>
</section>
</div>
<div class="success-overlay"></div>
<div class="success-message">
<span>X</span>
<h1>Thank you for participating</h1>
<p>Blah blah blah</p>
</div>
<script src="js/main.min.js"></script>
<script src="jquery-validation-1.13.1/dist/jquery.validate.min.js"></script>
<script src="jquery-validation-1.13.1/dist/additional-methods.js"></script>
<script>
$(document).ready(function() {
$.validator.addMethod("nonumbers", function(value, element, regexpr) {
return regexpr.test(value);
});
$.validator.addMethod("testemail", function(value, element, regexpr) {
return regexpr.test(value);
});
$("#scForm").validate({
debug: false,
errorPlacement: function(error, element) {
var errorid = "#" + $(error).attr("id");
var container = $(element).parent().parent().parent().find(errorid);
error.appendTo(container);
},
submitHandler: function(form) {
document.location.href = "index.html#stayconnected"
$(".success-overlay").show();
$(".success-message").show();
$(".success-message span").on("click",function(){
$(".success-overlay").hide();
$(".success-message").hide();
$("#firstName, #lastName, #email").val("");
});
form.submit();
},
rules: {
firstName: {
required: true,
minlength: 1,
nonumbers: /^[A-Za-z-]+$/
},
lastName: {
required: true,
minlength: 1,
nonumbers: /^[A-Za-z-]+$/
},
email: {
required: true,
email: true,
testemail: /^\w{2,}@\w{2,}\.\w{2,}$/
}
},
messages: {
firstName: {
required: "Please enter your first name",
minlength: "Please enter a valid first name",
nonumbers: "Only letters and dashes"
},
lastName: {
required: "Please enter your last name",
minlength: "Please enter a valid last name",
nonumbers: "Only letters and dashes"
},
email: {
required: "Please enter your email address",
email: "Please enter a valid email address",
testemail: "Please enter a valid email address"
}
}
});
});
</script>
</body>
</html>
答案 0 :(得分：0)
在我删除的my previous answer上，OP表示他正在使用jQuery 1.11.1，这排除了我的想法，即他使用的jQuery 2不支持IE 8。
根据the W3C Validator，您发布的代码包含44个错误，包括未关闭的容器元素。 Internet Explorer无法处理无效的HTML以及其他浏览器，如果没有符合标准的代码，浏览器就会出现无法预测的行为。
这些是最值得注意的错误......
第6行，第70列：具有http-equiv属性且值为X-UA-Compatible的元素元素必须具有值为IE = edge的内容属性。
第92行，第21栏：未结算的元素div。
第77行，第96栏：未结算的元素div。
第93行，第22列：看到结束标记部分，但是有开放元素。
第132行，第22栏：看到结束标记部分，但有开放元素。
第131行，第21栏：未关闭的元素div。
第155行，第22列：看到结束标记部分，但是有开放元素。
第154行，第21栏：未关闭的元素div。
第140行，第89栏：未结算的元素div。