网页顶部的空白区域答案

【问题标题】：Blank white space on top of the webpage网页顶部的空白区域
【发布时间】：2013-05-10 02:54:10
【问题描述】：

什么可能导致页面顶部出现空白

我想提供照片以供澄清，但由于在 stackoverflow 中的声誉较低，我无法上传。我使用 Smarty 作为 php 模板引擎。

<html>
    <head>
        {include file="_js.tpl"}
        <title>{$title|escape}</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        {literal}
            <style type="text/css">
                body{
                    margin:0;
                    padding:0;
                    display: block;
                    font-family: arial;
                }

                #main_iframe 
                {
                    position: relative;
                    width: 100%;
                    height:665px;
                    border:0px;         
                }

                #iframe_setting{
                    padding-left: 220px;
                    background: url('{/literal}{$vir_img}{literal}background.png');
                }
                #content-wrapper{
                    height: 665px;
                    padding-left: 10px;

                }

            </style>

            <script type="text/javascript">
                $(document).ready(function(){
                    $("button#logout").click(function(){
                        window.location = "{/literal}{$url_app}{literal}?m=account&c=do_logout";
                    });

                });

                function go(loc)
                {
                    document.getElementById('main_iframe').src=loc;
                }

                function go3(loc)
                {
                    document.getElementById('iframeid').src=loc;
                }
            </script>
        {/literal}
    </head>
        <body>{include file="header.tpl"}
                <div style="position:absolute;z-index: 999;">
                    {include file="sidebar.tpl"}
                </div>
                    <div id="iframe_setting">
                        <div id="content-wrapper">
                            {$content}
                        </div>
                    </div>
                    {include file="footer.tpl"}
        </body>
</html>

【问题讨论】：

请发布呈现的 HTML。您可以包含指向您的图像的链接，并且具有足够代表的人可以嵌入它。
您可以使用任何可用的 CSS 重置。只需 google "css reset" 或者你可以做 body, html {margin:0;填充：0； }
dropbox.com/s/htvxc9vkm45bryn/…
您确实必须向我们展示在浏览器中呈现的 HTML（查看源代码或类似的东西），而不是通过模板引擎之前的 HTML。据我所知，这个模板引擎可能会颠覆整个网站。
dropbox.com/s/0j8ouv8zaaqxo9l/sample.zip 我已经按照你说的渲染了文件。你可以从我的投递箱下载它

标签： php html css smarty template-engine

【解决方案1】：

使用notepad++，确保该文件中包含的所有文件以及它本身都是“在没有BOM 的情况下以UTF-8 编码”。为此，请执行以下操作：

在 Notpad++ -> (menu) Encoding -> (click) Encode in UTF-8 without BOM

如果您使用了 UTF8 字符并将文件保存为 UTF8，通常会发生这种情况。然后，将有三个不可见的字符导致该空白。

【讨论】：