我创建了一个简单的 html 业务演示页面，pagePiling.js 没有什么特别之处，对于侧边栏，我选择了 semantic-ui-sidebar。
在具有不同文档类型的不同浏览器中一切正常。我不知道要改变什么。如果我离开 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>
最佳答案
仔细观察，这是由于 Bootstrap 样式表与侧边栏样式表冲突所致。我通过删除 bootstrap css 发现了这一点，然后它可以使用正确的 html5 文档类型:
<!DOCTYPE html>
在不花费更多时间(比我已经花费的时间多 :))的情况下，最好制作一个没有引导元素的最小案例示例，只有 div 和一些文本并构建它。尝试一点一点地添加引导文件，找出冲突的位置，然后覆盖引导文件中的内容，使它们协调工作。
关于jquery - 使用语义 Ui 边栏更正 Doctype - 不同的浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30191904/