首页 > 解决方案 > 为什么 HTML 文件的 PHP 版本不显示所有元素?

问题描述

我正在将一堆 HTML 文件转换为他们的 PHP 等价物,用于大学作业游戏网站。目前我有一个名为“featured.html”的 HTML 文件和一个名为“featured.php”的 php 文件。我使用 echo 语句来复制 html 文件的内容并使用 style.css 进行样式设置。当我打开 php 文件时,它只显示前 15 个左右的元素(大约 50 个)。当我使用检查元素工具时,所有元素都存在,但似乎我无法在 php 中向下滚动以查看所有元素。为什么会这样?

我已经查看了为什么我的 PHP 代码不重复 HTML 元素以及为什么我的 php 表单不显示所有内容的问题?,但都无法得到满意的答复。

以下是原始 html “featured.html”:

<html>
    <head>
        <script src="jquery-3.6.0.js"></script>
        <script src="api-control.js" type="text/javascript"></script>
        <meta charset="utf-8">
        <title> Convergence Gaming | Welcome </title> 
        <link rel="stylesheet" href="./css/style.css"> 
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <section id="featuredpage">
            <div class="myGallery">
                <div class="item">
                  <a href="https://www.monsterhunter.com/rise/us/"><img src="./img/giphy.gif" /></a>
                  <span class="caption">Monster Hunter Rise | Dev: Capcom | Genre: Action | Platform: Nintendo | Released: 2012/06/02 </span>
                </div>
<!-- ...there are about 50 of these "item" divs, not the best way of going about it, but I have to build on previous work...-->
                <div class="item">
                    <a href="https://www.callofduty.com/"><img src="./img/giphy.gif"></a>
                    <span class="caption">Call of Duty Cold War | Dev: Activision | Genre: Shooter | Platform: All | Released: 2009/03/01 </span>
                  </div>
                </div>
         </section>
    </body>
</html>

下面是 features.php 文件:

<?php

include './header.php';
include './footer.php';

echo '<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-3.6.0.js"></script>
        <script src="api-control.js" type="text/javascript"></script>
        <meta charset="utf-8">
        <title> Convergence Gaming | Welcome </title> 
        <link rel="stylesheet" href="./css/style.css"> 
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <section id="featuredpage">
            <div class="myGallery">
                <div class="item">
                  <a href="https://www.monsterhunter.com/rise/us/"><img src="./img/giphy.gif" /></a>
                  <span class="caption">Monster Hunter Rise | Dev: Capcom | Genre: Action | Platform: Nintendo | Released: 2012/06/02 </span>
                </div>
             <!-- The rest of the echo statement contains the same content as the html and so is omitted -->            <div class="item">
              <a href="https://www.nomanssky.com/"><img src="./img/giphy.gif"></a>
              <span class="caption">No Mans Sky | Dev: Hello Games | Genre: Adventure | Platform: All | Released: 2016/10/09 </span>
            </div>   
        </div>
        </section>
    </body>
</html> ';
?>

有什么解释为什么会发生这种情况?echo 语句包含 html 代码的精确副本,并且所有其他样式元素似乎都可以工作。任何帮助将不胜感激。

标签: phphtmlcss

解决方案


只在需要的地方使用 PHP

PHP 文件可以处理混合输出和 php 标签。也许这不是问题,但可以更容易地找到解决方案。

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-3.6.0.js"></script>
        <script src="api-control.js" type="text/javascript"></script>
        <meta charset="utf-8">
        <title> Convergence Gaming | Welcome </title> 
        <link rel="stylesheet" href="./css/style.css"> 
        <meta name="viewport" content="width=device-width">
    </head>
    <body>

<?php include './header.php'; ?>

        <section id="featuredpage">
            <div class="myGallery">
                <div class="item">
                  <a href="https://www.monsterhunter.com/rise/us/"><img src="./img/giphy.gif" /></a>
                  <span class="caption">Monster Hunter Rise | Dev: Capcom | Genre: Action | Platform: Nintendo | Released: 2012/06/02 </span>
                </div>
                <!-- The rest of the echo statement contains the same content as the html and so is omitted -->
                <div class="item">
                    <a href="https://www.nomanssky.com/"><img src="./img/giphy.gif" /></a>
                    <span class="caption">No Mans Sky | Dev: Hello Games | Genre: Adventure | Platform: All | Released: 2016/10/09 </span>
                </div>   
            </div>
        </section>

<?php include './footer.php'; ?>

    </body>
</html>

doctype问题吗?

唯一真正的区别是在 PHP 代码开头的 doctype 声明:<!DOCTYPE html>. 那可能不是你的问题..?


推荐阅读