2

向下滚动时如何解决顶部的溢出问题？这是 Facebook 页面中的应用程序。这是谷歌浏览器快照。

在此处输入图像描述

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title><?php echo TITLE ?></title>
        <link href="<?php echo CSS; ?>style.css" rel="stylesheet" type="text/css" />     
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <!--<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>-->
        <script type="text/javascript" src="js/UnityObject2.js"></script>


        <script type="text/javascript">
            var config = {
                width: 760,
                height: 827,
                params: {enableDebugging: "0"},
            };
            var u = new UnityObject2(config);
            jQuery(function() {

                var $missingScreen = jQuery("#unityPlayer").find(".missing");
                var $brokenScreen = jQuery("#unityPlayer").find(".broken");
                $missingScreen.hide();
                $brokenScreen.hide();
                u.observeProgress(function(progress) {
                    switch (progress.pluginStatus) {
                        case "broken":
                            $brokenScreen.find("a").click(function(e) {
                                e.stopPropagation();
                                e.preventDefault();
                                u.installPlugin();
                                return false;
                            });
                            $brokenScreen.show();
                            break;
                        case "missing":
                            $missingScreen.find("a").click(function(e) {
                                e.stopPropagation();
                                e.preventDefault();
                                u.installPlugin();
                                return false;
                            });
                            $missingScreen.show();
                            break;
                        case "installed":
                            $missingScreen.remove();
                            break;
                        case "first":
                            break;
                    }
                });
                u.initPlugin(jQuery("#unityPlayer")[0], "GermsBuster.unity3d");
            });

        </script>
        <style type="text/css">

            body {
                font-family: Helvetica, Verdana, Arial, sans-serif;
                background-color: white;
                color: black;
                text-align: center;
            }
            a:link, a:visited {
                color: #000;
            }
            a:active, a:hover {
                color: #666;
            }
            p.header {
                font-size: small;
            }
            p.header span {
                font-weight: bold;
            }
            p.footer {
                font-size: x-small;
            }
            div.content {
                margin: auto;
                width: 760px;
            }
            .back{
                z-index:10 !important;
            }
            div.broken,
            div.missing {
                margin: auto;
                position: relative;
                top: 50%;
                width: 193px;
            }
            div.broken a,
            div.missing a {
                height: 63px;
                position: relative;
                top: -31px;
            }
            div.broken img,
            div.missing img {
                border-width: 0px;
            }
            div.broken {
                display: none;
            }
            div#unityPlayer {
                cursor: default;
                height: 827px;
                width: 760px;
            }

        </style>
    </head>
    <body style="margin:0px; padding:0px;">
        <div id="fb-root" class="_56b8"></div>
        <div class="video-ar" style="display:none">
            <a class="fancybox fancybox.iframe" href="Products_ar.php">video ar</a>
        </div>
        <div class="video-en" style="display:none">
            <a class="fancybox fancybox.iframe" href="Products_en.php">video en</a>
        </div>

        <div class="fb-app-requests-container" style="display:none">request</div>
        <div class="fb-user-info-container" style="display:none">user info</div>

        <p class="header" style="display:none"><span><!--Unity Web Player | --></span><?php echo TITLE ?></p>
        <div class="content" style="z-index:-1000 !important;">
            <div id="unityPlayer" style="display:block; z-index:-1000 !important">
                <div class="missing">
                    <a href="https://unity3d.com/webplayer/" target="_blank" title="Unity Web Player. Install now!">
                        <img alt="Unity Web Player. Install now!" src="images/getunity.png" width="193" height="63" />
                    </a>
                </div>
                <div class="broken">
                    <a href="https://unity3d.com/webplayer/" target="_blank" title="Unity Web Player. Install now! Restart your browser after install.">
                        <img alt="Unity Web Player. Install now! Restart your browser after install." src="images/getunityrestart.png" width="193" height="63" />
                    </a>
                </div>
            </div>
        </div>


        <!-- LIGHTBOX -->
        <script type="text/javascript" src="js/lightbox.js?v=2.1.4"></script>
        <link rel="stylesheet" type="text/css" href="css/lightbox.css?v=2.1.4" media="screen" />
        <script type="text/javascript">
            $(document).ready(function() {
                $('.fancybox').fancybox();
            });
        </script>
        <!-- LIGHTBOX -->

    </body>
</html>
4

2 回答 2

2

粉丝页面“Canvas URL”并非由 facbook 设计用于处理 Unity 应用程序，而是使用应用程序页面“Canvas Page”。你不会在那里面对这个问题。

于 2013-10-01T06:26:17.443 回答
0

在 HTML 标签中添加样式 -

<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden">

希望能帮助到你

于 2013-09-10T11:54:38.500 回答