网页顶部出现空白行的原因以及解决方法

overme2个月前 (10-17)网页设计265
背景:

使用Html+PHP通过本地phpstudy工具搭建了一个Web应用,在本地运行时,页面布局都是正常的。项目上传服务器后,开始页面布局显示也是正常的。可是一段时间后页面最顶部出现一个空白行,影响了网页布局。

① 首先想到是不是有css样式变化,导致出现布局异常。但是通过F12调出浏览器调试界面,确认了元素css样式没有异常。

② 确认元素样式时,发现body开头初有一个非法字符&#65279,且Body元素与Head元素的位置调换了。

到处查找了原因,页面的编码是UTF-8 + BOM导致BOM字符影响了布局。

UTF-8 + BOM编码方式一般会在windows操作系统中出现,比如WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM)。它是一串隐藏的字符,用于让记事本等编辑器识别这个文件是否以UTF-8编码。对于一般的文件,这样并不会产生什么麻烦。但对于 PHP来说,BOM是个大麻烦。因为PHP并不会忽略BOM,所以在读取、包含或者引用这些文件时,会把BOM作为该文件开头正文的一部分。根据嵌入式语言的特点,这串字符将被直接执行(显示)出来,即我们看到的()字符。

解决办法(来源网络)

找到出现&#65279字符的相关页面(php,html,css,js等),查看页面编码方式,如果是UTF-8 + BOM编码方式,则使用notepad++或其他工具存储为”UTF-8无BOM”即可解决。

如果文件比较多,不知道从何入手时,这时可使用下面的方法来实现。

将下面代码保存为a.php(随意命名)文件放到根目录下,然后运行一下这个文件,即可自动清储格式。

补充:如果是在服务器中实现清除,为了安全起见,首先备份下再操作,另外请确保文件有写入权限,否则无法清除。

<?php
// 设定你要清除BOM的根目录(会自动扫描所有子目录和文件)
$HOME = dirname(__FILE__);
// 如果是Windows系统,修改为:$WIN = 1;
$WIN = 0;
?>
<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>UTF8 BOM 清除器</title>
    <style>
        body { font-size: 10px; font-family: Arial, Helvetica, sans-serif; background: #FFF; color: #000; }
        .FOUND { color: #F30; font-size: 14px; font-weight: bold; }
    </style>
</head>
<body>
<?php
$BOMBED = array();
RecursiveFolder($HOME);
echo ‘<h2>这些文件有UTF8 BOM,但我清理了它们::</h2><p class=”FOUND”>’;
foreach ($BOMBED as $utf) { echo $utf .”<br />\n”; }
echo ‘</p>’;
// 递归扫描
function RecursiveFolder($sHOME) {
    global $BOMBED, $WIN;
    $win32 = ($WIN == 1) ? “\\” : “/”;
    $folder = dir($sHOME);
    $foundfolders = array();
    while ($file = $folder->read()) {
        if($file != “.” and $file != “..”) {
            if(filetype($sHOME . $win32 . $file) == “dir”){
                $foundfolders[count($foundfolders)] = $sHOME . $win32 . $file;
            } else {
                $content = file_get_contents($sHOME . $win32 . $file);
                $BOM = SearchBOM($content);
                if ($BOM) {
                    $BOMBED[count($BOMBED)] = $sHOME . $win32 . $file;
                    // 移出BOM信息
                    $content = substr($content,3);
                    // 写回到原始文件
                    file_put_contents($sHOME . $win32 . $file, $content);
                }
            }
        }
    }
    $folder->close();
    if(count($foundfolders) > 0) {
        foreach ($foundfolders as $folder) {
            RecursiveFolder($folder, $win32);
        }
    }
}
// 搜索当前文件是否有BOM
function SearchBOM($string) {
    if(substr($string,0,3) == pack(“CCC”,0xef,0xbb,0xbf)) return true;
    return false;
}
?>
</body>
</html>

相关文章


		异常的网页布局li元素在IE浏览器中显示异常

异常的网页布局li元素在IE浏览器中显示异常

现象:PHP开发的项目,本地调试时,Chorme浏览器和IE浏览器LI元素显示都是正常的。开发完成的网站代码,上传到Linux服务器端后,Chorme浏览器还能正常显示CSS效果,但是IE浏览器...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。