Question

我创建了一个简单的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>

Answer 1

仔细观察，这是因为引导程序样式表与侧边栏样式表冲突。我通过删除bootstrap css找到了这个，然后它使用正确的html5 doctype：

$cars = array("Param1" => "hi", "Param2" => "hello");
//$result=$client->call('TestMethod');
$result = $client->call->TestMethod($cars);

不花费更多的时间（比我已经花了:)）最好是制作一个没有bootstrap元素的小例子，只有div和一些文本并构建它。尝试逐位添加引导程序文件，找出冲突的位置，然后覆盖引导程序文件中的内容，以便它们协调工作。

Answer 2

听起来像验证问题。看起来你的HTML末尾有一个额外的关闭div标签。如果您将来遇到类似问题，请务必验证HTML。如果这可以解决您的问题，请告诉我。

使用语义Ui补充工具栏更正Doctype - 不同的浏览器

2 个答案: