Question

我一直在将我的PHP文件从ANSI转换为UTF-8，而我的代码却发生了一些奇怪的事情，我不知道为什么。这是我的index.php代码

<?php get_header(); ?>
<div id="container">

</div>
<?php get_footer(); ?>

我的header.php是这样的：

<!DOCTYPE html>
<html>
<head>
    <title>Somethingá</title>
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>">
</head>
<body>
<div id="header">
    <div id="header-wrap">
        <div id="logo"><a href="index.php"><img src="<?php bloginfo('template_directory'); ?>/img/logo.png" alt="ODS"></a></div>
        <div id="header-text">Karviná</div>
        <hr>
        <div id="menu">
        <ul>
            <li><a href="#" class="righter">something</a></li>
            <li><a href="#" class="righter">something</a></li>
            <li><a href="#" class="righter">something</a></li>
            <li><a href="#" class="righter">something</a></li>
            <li><a href="#" class="righter">something</a></li>
            <li><a href="#" class="righter2">something</a></li>
            <li><a href="#">something</a></li>
        </ul>
        </div>
    </div>
</div>

并且最后一个footer.php包含：

<div id="footer">

</div>
</body>

但是有一个我无法理解的问题。这是一个wordpress主题，所有文件都是UTF-8编码。每次我打开网站选择它们时，都有空格。例如，标题不在页面顶部，但距离顶部约20px。我检查了我可以在Google Chrome中的开发者控制台中看到的代码，它包含以下内容：

<html>
<head>
<style type="text/css"></style>
</head>
<body>



<title>Somethingá</title>
<link rel="stylesheet" type="text/css" media="all" href="http://XX.XXX.XXX.XX/wp-content/themes/xxx/style.css">
<div id="header">
    <div id="header-wrap">
        <div id="logo"><a href="index.php"><img src="http://93.185.106.91/wp-content/themes/ods/img/logo.png" alt="ODS"></a></div>
        <div id="header-text">Karviná</div>
        <hr>
        <div id="menu">
        <ul>
            <li><a href="#" class="righter">something</a></li>
            <li><a href="#" class="righter">something</a></li>
            <li><a href="#" class="righter">something</a></li>
            <li><a href="#" class="righter">something</a></li>
            <li><a href="#" class="righter">something</a></li>
            <li><a href="#" class="righter2">something</a></li>
            <li><a href="#">something</a></li>
        </ul>
        </div>
    </div>
</div>



<div id="footer">

</div>
</body>
</html>

这很奇怪。我不明白为什么<head> </head>的内容转移到<body> </body>。它还在<body>和<title>，</div>和<div id="footer">之间生成了巨大的空白区域。

谢谢。

Answer 1

首先，我建议查看“查看源代码”选项，以查看正在加载到浏览器中的实际代码。查看开发人员工具将在浏览器处理完代码后向您显示代码，这与您实际输出的代码不同。

之所以不同，是因为浏览器会处理任何无效的HTML并尝试在HTML无效的情况下尽可能安排页面。

在您的情况下，很明显HTML中存在无效内容。我无法看到它是什么，但您可以使用W3C Validator轻松地自行检查。这将告诉您代码中的任何HTML错误。

修正这些错误，浏览器应该开始正确显示您的网页。

希望有所帮助。

Answer 2

代码很干净但是如果你正在创建WordPress主题并且你需要UTF 8.你必须使用没有BOM的UTF-8！没有BOM。

我的PHP / HTML代码中有奇怪的空格

2 个答案: