我创建了一个简单的 html 业务演示页面，pagePiling.js 并没有什么特别之处，而对于侧边栏，我选择了语义 UI 侧边栏。
在具有不同文档类型的不同浏览器中一切正常。我不知道要改变什么。如果我离开 doctype chrome 将正确显示所有内容。但是 Mozilla Firefox 需要 doctype 以便 jquery 将返回正确的 window.size。当我设置时，侧边栏停止工作。
问题：没有 doctype 一切正常，但 firefox 不正确执行 jquery 命令 window.height()。
问题：使用 Doctype html mozilla 可以正常工作，但侧边栏插件无法正常工作。
在删除内容的 html 构造之后。有人帮忙吗？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>pagePiling.js plugin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="js/pagePiling.js-master/jquery.pagepiling.css"/>
<link rel="stylesheet" type="text/css" href="http://alvarotrigo.com/pagePiling/jquery.pagepiling.css"/>
<link rel="stylesheet" type="text/css" href="http://studentcouch.de/sidebar.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://alvarotrigo.com/pagePiling/jquery.pagepiling.min.js"></script>
<script type="text/javascript" src="http://studentcouch.de/sidebar.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Plugin intialization
*/
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8'],
sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'],
navigation: {
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4', 'Page 5', 'Page 6', 'Page 7', 'Page 8']
},
afterRender: function(){
$('#pp-nav').addClass('custom');
},
afterLoad: function(anchorLink, index){
if(index>1){
$('#pp-nav').removeClass('custom');
}else{
$('#pp-nav').addClass('custom');
}
}
});
/*
* Internal use of the demo website
*/
$('#showExamples').click(function(e){
e.stopPropagation();
e.preventDefault();
$('#examplesList').toggle();
});
$("#page5image").height($(window).height()*0.7);
$('html').click(function(){
$('#examplesList').hide();
});
$('.sidebartoggle').click(function() {
$('.ui.sidebar').sidebar('show');
});
});
</script>
<style>
.sidebartoggle {
}
/* Section 1
* --------------------------------------- */
}
/* Overwriting fullPage.js tooltip color
* --------------------------------------- */
#pp-nav.custom .pp-tooltip{
color: #AAA;
}
#markup{
display: block;
width: 450px;
margin: 20px auto;
text-align: left;
}
</style>
</head>
<body>
<div class="ui right vertical sidebar">
<ul class="navside">
<li> <a href="/">Support</a></li>
<li> <a href="/">Team</a></li>
<li> <a href="/">Jobs</a></li>
<li> <a href="/">Kontakt</a></li>
</ul>
</div>
<div class="pusher">
<div style="background-color:white" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"><img src="" style="height:50px"/></div>
<ul class="nav navbar-nav">
<li><a href="#">Login </a></li>
<li><a href="#">Registrierung</a></li>
</ul>
<ul id="menu" class="nav navbar-nav navbar-right">
<li data-menuanchor="page1"><a href="#page1">Käufer</a></li>
<li data-menuanchor="page2"> <a href="#page2">Händler</a></li>
<li data-menuanchor="page3"> <a href="#page3">Support</a></li>
<li><a href="#" class="sidebartoggle">Menü</a></li>
</ul>
</div>
</div>
<div id="pagepiling">
<div id="section1" class="section">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>Side one</h1>
</div>
</div>
</div>
</div>
<div id="section2" class="section">
<div class="row">
<div class="col-md-6">
<h1> side two </h1>
<img id="page5image" class="center" src="http://studentcouch.de/device_page5.png" style="display:block;" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>