php - 为什么我的 HTML 片段出现在页面上并破坏了它？它与PHP相关吗？-6ren

php - 为什么我的 HTML 片段出现在页面上并破坏了它？它与PHP相关吗？

转载作者：太空宇宙更新时间：2023-11-04 15:25:48

我一直在使用 PHP、HTML、CSS 构建网站，并使用大量的 jQuery javascript。该网站在我的 Mac 浏览器上看起来非常好，但出于某种原因，当我的客户使用 PC Safari 时，她看到页面上出现了我的 HTML 的奇怪部分。

以下是一些(小的)截图示例:

图 1:这只是一个结束 </li>应该在 Media li 元素上的标签。没有造成太大伤害，但很奇怪。

submenu

图 2:这是 <div class='submenu'> 的一部分由于 div 标签没有正确呈现，该 div 的全部内容无法通过 CSS 正确设置样式。

//出于安全原因删除了图片

图 3:最后一个示例显示了本应为 <a class='top current' href=... 的内容但由于某种原因，一半的 HTML 标记停止呈现并被打印出来。因此，该列表菜单的其余部分已完全损坏。

这是 header.php 文件本身的代码。主导航部分(如屏幕截图所示)在更下方，如果您想跳过那里，则用一行星号标记。

<?php
  // Setting up location variables
  if(isset($_GET['page'])) { $page = Page::find_by_slug($_GET['page']); } 
  elseif(isset($_GET['post'])) { $page = Page::find_by_id(4); }
  else { $page = Page::find_by_id(1); }
  $post = isset($_GET['post']) ? Blogpost::find_by_slug($_GET['post']) : false;
  $front = $page->id == 1 ? true : false;
  $buildblog = $page->id == 4 ? true : false;
  $eventpage = $page->id == 42 ? true : false;

  // Setting up content edit variables
  $edit = isset($_GET['edit']) ? true : false;
  $preview = isset($_GET['preview']) ? true : false;

  // Finding page slug value
  $pageslug = $page->get_slug($loggedIn);
?>

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
<?php 
if(!$post) {
    if($page->id != 1) {
        echo $page->title." | ";
    }
    echo $database->site_name(); 
}
elseif($post) {
    echo "BuildBlog | ".$post->title;
}
?>
</title>
<link href="<?php echo SITE_URL; ?>/styles/style.css" media="all" rel="stylesheet" />
<?php include(SITE_ROOT."/scripts/myJS.php"); ?>
</head>

<body class="
<?php 
    if($loggedIn) { echo "logged"; } else { echo "public"; } 
    if($front) { echo " front"; }
?>">
<?php $previewslug = str_replace("&edit", "", $pageslug); ?>
<?php if($edit) { echo "<form id='editPageForm' action='?page={$previewslug}&preview' method='post'>"; } ?>
<?php if($edit && !$preview) :  // Edit original ?>
<div id="admin_meta_nav" class="admin_meta_nav">
    <ul class="center nolist">
        <li class="title">Edit</li>
        <li class="cancel"><a class="cancel" href="?page=<?php echo $pageslug; ?>&cancel">Cancel</a></li>
        <li class="save"><input style='position: relative; z-index: 500' class='save' type="submit" name="newpreview" value="Preview" /></li>
        <li class="publish"><input style='position: relative; z-index: 500' class='publish button' type="submit" name="publishPreview" value="Publish" /></li>
    </ul>
</div>
<?php elseif($preview && !$edit) : // Preview your edits ?>
<div id="admin_meta_nav" class="admin_meta_nav">
    <ul class="center nolist">
        <li class="title">Preview</li>
        <li class="cancel"><a class="cancel" href="?page=<?php echo $pageslug; ?>&cancel">Cancel</a></li>
        <li class="save"><a class="newpreview" href="?page=<?php echo $pageslug; ?>&preview&edit">Continue Editing</a></li>
        <li class="publish"><a class="publish" href="?page=<?php echo $pageslug; ?>&publishLastPreview">Publish</a></li>
    </ul>
</div>
<?php elseif($preview && $edit) : // Return to preview and continue editing ?>
<div id="admin_meta_nav" class="admin_meta_nav">
    <ul class="center nolist">
        <li class="title">Edit Again</li>
        <li class="cancel"><a class="cancel" href="?page=<?php echo $pageslug; ?>&cancel">Cancel</a></li>
        <li class="save"><input style='position: relative; z-index: 500' class='save button' type="submit" name="newpreview" value="Preview" /></li>
        <li class="publish"><input style='position: relative; z-index: 500' class='publish button' type="submit" name="publishPreview" value="Publish" /></li>
    </ul>
</div>
<?php else : ?>
<div id="meta_nav" class="meta_nav">
    <ul class="center nolist">
        <li><a href="login.php?logout">Logout</a></li>
        <li><a href="<?php echo SITE_URL; ?>/admin">Admin</a></li>
        <li><a href="<?php 
            if($front) {
                echo "admin/?admin=frontpage";
            } elseif($event || $eventpage) {
                echo "admin/?admin=events";
            } elseif($buildblog) {
                if($post) {
                    echo "admin/editpost.php?post={$post->id}";
                } else {
                    echo "admin/?admin=blog";
                }
            } else {
                echo "?page=".$pageslug."&edit";
            }

         ?>">Edit Mode</a></li>
         <li><a href="<?php echo SITE_URL; ?>/?page=donate">Donate</a></li>
         <li><a href="<?php echo SITE_URL; ?>/?page=calendar">Calendar</a></li>
    </ul>
    <div class="clear"></div>
</div>
<?php endif; ?>
<div id="public_meta_nav" class="public_meta_nav">
<div class="center">
    <ul class="nolist">
    <li><a href="<?php echo SITE_URL; ?>/?page=donate">Donate</a></li>
    <li><a href="<?php echo SITE_URL; ?>/?page=calendar">Calendar</a></li>
    </ul>
    <div class="clear"></div>
</div>
</div>

******* 主导航部分，如上面的屏幕截图所示，从这里开始 ********

<div class="header">
<div class="center">
    <a class="front_logo" href="<?php echo SITE_URL; ?>"><?php echo $database->site_name(); ?></a>
    <ul class="nolist main_nav">
    <?php 
        $tops = Page::get_top_pages(); 
        $topcount = 1;
        foreach($tops as $top) {
            $current = $top->id == $topID ? true : false;
            $title = $top->title == "Front Page" ? "Home" : ucwords($top->title);
            $url = ($top->title == "Front Page" || !$top->get_slug($loggedIn)) ? SITE_URL : SITE_URL . "/?page=".$top->get_slug($loggedIn);
            if(isset($_GET['post']) && $top->id == 1) {
                $current = false;
            }
            if(isset($_GET['post']) && $top->id == 4) {
                $current = true;
            }

            echo "<li";
            if($topcount > 3) { echo " class='right'"; }
            echo "><a class='top";
            if($current) { echo " current"; }

            echo "' href='{$url}'>{$title}</a>";
            if($children = Page::get_children($top->id)) {
                echo "<div class='submenu'>";
                echo "<div class='corner-helper'></div>";
                foreach($children as $child) {

                    echo "<ul class='nolist level1";
                    if(!$subchildren = Page::get_children($child->id)) {
                        echo " nochildren";
                    }
                    echo "'>";
                    $title = ucwords($child->title);
                    $url = !$child->get_slug($loggedIn) ? SITE_URL : SITE_URL . "/?page=".$child->get_slug($loggedIn);
                    if($child->has_published() || $loggedIn) {
                        echo "<li><a class='title' href='{$url}'>{$title}</a>";

                        if($subchildren = Page::get_children($child->id)) {
                            echo "<ul class='nolist level2'>";
                            foreach($subchildren as $subchild) {
                                if($subchild->has_published() || $loggedIn) {
                                    $title = ucwords($subchild->title);
                                    $url = !$subchild->get_slug($loggedIn) ? SITE_URL : SITE_URL . "/?page=".$subchild->get_slug($loggedIn);
                                    echo "<li><a href='{$url}'>{$title}</a>";
                                }
                            }
                            echo "</ul>";
                        }
                        echo "</li>";
                    }
                    echo "</ul>";
                }
                echo "</div>";
            }
            echo "</li>";
            $topcount++;
        }
    ?>
    </ul>
    <div class="clear"></div>
</div>
</div>
<div id="mediaLibraryPopup" class="mediaLibraryPopup">
    <h3>Media Library</h3>
    <ul class="box nolist"></ul>
    <div class="clear"></div>
    <a href="#" class="cancel">Cancel</a>
</div>
<div class="main_content">

有谁知道为什么 PC Safari 浏览器会像这样破坏一切？我假设它与 PHP 相关，但我不明白为什么会那样做。

这是根据要求提供的 HTML 的查看源代码版本:(IP 已被隐藏，仅供引用)

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Become An Advocate | Habitat for Humanity</title>
<link href="http://28.5.337.28/~habiall2/styles/style.css" media="all" rel="stylesheet" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>  
<script src='http://28.5.337.28/~habiall2/scripts/tiny_mce.js'></script>
<script src='http://28.5.337.28/~habiall2/scripts/jquery.easing.js'></script>
<script src='http://28.5.337.28/~habiall2/scripts/cufon.js'></script>
<script src='http://28.5.337.28/~habiall2/scripts/helvetica_condensed.js'></script>
<script>
    Cufon.replace('#feature_boxes .heading', { hover: true });
    Cufon.replace('#feature_boxes .button', { hover: true });
</script>

<script src='http://28.5.337.28/~habiall2/scripts/front_public.js'></script><script src='http://28.5.337.28/~habiall2/scripts/front_admin.js'></script><script src='http://28.5.337.28/~habiall2/scripts/jquery.cycle.js'></script>
<script >
$('#feature_boxes').cycle({ 
    fx:     'fade',
    timeout: 8000,
    speed: 500,
    easing: 'easeInCubic',
    pager:   '.feature_pager'
    });
</script>
</head>

<body class="
public">
            <div id="meta_nav" class="meta_nav">
    <ul class="center nolist">
        <li><a href="login.php?logout">Logout</a></li>

            <li><a href="http://28.5.337.28/~habiall2/admin">Admin</a></li>
            <li><a href="?page=what-is-advocacy&edit">Edit Mode</a></li>
            <li><a href="http://28.5.337.28/~habiall2/?page=donate">Donate</a></li>
            <li><a href="http://28.5.337.28/~habiall2/?page=calendar">Calendar</a></li>
        </ul>
        <div class="clear"></div>
    </div>

    <div id="public_meta_nav" class="public_meta_nav">
    <div class="center">
    <ul class="nolist">
    <li><a href="http://28.5.337.28/~habiall2/?page=donate">Donate</a></li>
    <li><a href="http://28.5.337.28/~habiall2/?page=calendar">Calendar</a></li>
    </ul>
    <div class="clear"></div>
    </div>
</div>

<div class="header">
    <div class="center">
        <a class="front_logo" href="http://28.5.337.28/~habiall2">Habitat for Humanity</a>
        <ul class="nolist main_nav">
        <li><a class='top' href='http://28.5.337.28/~habiall2'>Home</a></li>
        <li><a class='top' href='http://28.5.337.28/~habiall2/?page=about'>About</a>
            <div class='submenu'><div class='corner-helper'></div>
            <ul class='nolist level1'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=about-us'>About Us</a>
            <ul class='nolist level2'>
                <li><a href='http://28.5.337.28/~habiall2/?page=mission-and-vision'>Mission And Vision</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=history'>History</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=staff-and-board'>Staff And Board</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=jobs-and-internships'>Jobs And Internships</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=directions'>Directions</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=annual-report'>Annual Report</a>
            </ul>
            </li>
        </ul>
        <ul class='nolist level1'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=our-stories'>Our Stories</a>
            <ul class='nolist level2'><li><a href='http://28.5.337.28/~habiall2/?page=homeowner-profiles'>Homeowner Profiles</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=volunteer-profiles'>Volunteer Profiles</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=partner-profiles'>Corporate Profiles</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=community-profiles'>Community Profiles</a>
            </ul>
            </li>
        </ul>
        <ul class='nolist level1 nochildren'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=calendar'>Calendar</a></li>
        </ul>
        </div>
    </li>
    <li><a class='top current' href='http://28.5.337.28/~habiall2/?page=get-involved'>Get Involved</a>
        <div class='submenu'><div class='corner-helper'></div>
        <ul class='nolist level1'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=construction volunteer'>Volunteer</a>
            <ul class='nolist level2'>
                <li><a href='http://28.5.337.28/~habiall2/?page=Construction'>Construction</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=non-construction volunteer'>Non-Construction </a>
                <li><a href='http://28.5.337.28/~habiall2/?page=faith-programs'>Faith Programs</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=youth-programs'>Youth Programs</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=forms-and-info'>Forms And Info</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=AmeriCorps'>AmeriCorps</a>
            </ul>
            </li>
        </ul>
        <ul class='nolist level1'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=advocate-1'>Advocate</a>
            <ul class='nolist level2'>
                <li><a href='http://28.5.337.28/~habiall2/?page=become-an-advocate'>What Is Advocacy?</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=what-is-advocacy'>Become An Advocate</a>
            </ul>
            </li>
        </ul>
        <ul class='nolist level1'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=donate-1-2'>Donate</a>
            <ul class='nolist level2'>
                <li><a href='http://28.5.337.28/~habiall2/?page=one-time-donation'>One-time Donations</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=corporate-donations'>Corporate Donations</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=ReStore'>ReStore</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=vehicle-donation'>Other Ways To Donate</a>
                <li><a href='http://28.5.337.28/~habiall2/?page=item-wishlist'>Item Wishlist</a>
            </ul>
            </li>
        </ul>
        </div>
    </li>
    <li class='right'><a class='top' href='http://28.5.337.28/~habiall2/?page=apply'>Apply</a>
        <div class='submenu'><div class='corner-helper'></div>
        <ul class='nolist level1 nochildren'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=process'>Requirements</a></li>
        </ul>
        <ul class='nolist level1 nochildren'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=requirements'>Income Guidelines</a></li>
        </ul>
        <ul class='nolist level1 nochildren'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=Local-Assistance-'>Local Assistance </a></li>
        </ul>
        </div>
    </li>
    <li class='right'><a class='top' href='http://28.5.337.28/~habiall2/?page=blog'>BuildBlog</a></li>
    <li class='right'><a class='top' href='http://28.5.337.28/~habiall2/?page=media'>Media</a>
        <div class='submenu'><div class='corner-helper'></div>
        <ul class='nolist level1 nochildren'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=presskit'>Presskit</a></li>
        </ul>
        <ul class='nolist level1 nochildren'>
            <li><a class='title' href='http://28.5.337.28/~habiall2/?page=media-gallery'>Media Gallery</a></li>
        </ul>
        </div>
    </li>        
</ul>
<div class="clear"></div>
</div>
</div>
<div id="mediaLibraryPopup" class="mediaLibraryPopup">
    <h3>Media Library</h3>
    <ul class="box nolist"></ul>
    <div class="clear"></div>
    <a href="#" class="cancel">Cancel</a>
</div>

最佳答案

PHP 永远不会在浏览器之间产生任何差异(除非您努力让它这样做)。它是在服务器端编译的，因此浏览器唯一看到的是 HTML/CSS/Javascript。

关于php - 为什么我的 HTML 片段出现在页面上并破坏了它？它与PHP相关吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2516634/

文章推荐： JavaScript CSV 验证

文章推荐： javascript - 错误: 'Stray start tag div'

文章推荐： javascript - Fullcalendar 不在客户端呈现事件

文章推荐： javascript - vue 两个计算属性相互依赖

自动完成中未使用 Xcode 片段
我已将重要信息加粗以使其更易于阅读。我昨天刚刚更新到Xcode 7.3并且一整天都在尝试解决我的问题。对于类(class)，我们用 C 编程并使用 SVN 修改我们所有的文件以创建我们的项目。我使
URL 片段 (#) 允许的字符
在互联网上进行了一些挖掘之后，我无法找到一个很好的答案来说明我可以将哪些字符用于 URL 片段。我正在编写一个 javascript 脚本，它将利用 URL 片段。我想让 URL 看起来不那么复杂，
每个关键帧中带有标题的 MP4 片段
我正在尝试在分段文件(styp)的 mp4 容器中定位 h264 帧。对于分割，我目前使用 MP4Box dash。我使用 MP4Box 解析器，我注意到在每个关键帧(IDR)中样本的大小与原始文件中
jquery - 片段 - 淡入然后淡出
我想要一个自定义片段动画，以便它们淡入右/淡入左，然后在短暂延迟后淡出。假定所有片段都具有类 .visible 和 .current-fragment。我以为我可以在短暂的延迟后删除类 .visibl
C# Autolevel 片段？
有没有人看到过在 C# 中自动调平图像的任何好的片段？最佳答案参见 http://code.google.com/p/aforge/ 关于C# Autolevel 片段？，我们在Stack O
controls - 如何从控件获取父 View /片段
如何检索 View 所属的 Fragment/sap.ui.core.Control？ BR 克里斯最佳答案如果您的控件的标识符包含 View 的标识符(如果您使用的是 XML View ，则类似
lua - 试图理解这个 lua 片段
我试图了解这个函数的作用。任何人都可以向我解释这一点吗？ function newInstance (class) local o = {} setmetatable (o, clas
dependencies - 用于安装依赖项最新版本的 Nuspec 片段
简介根据 this documentation可以指定依赖项，包括每个包的版本，如下所示: 问题需要应用哪个 Nuspec 片段才能安装依赖项的最新版本？最佳答案不幸的是，您无法
graphql - 如何在多种类型上使用 GraphQL 片段
我有一个 Gatsby 项目，它对两种不同类型的内容进行了非常相似的 GraphQL 查询:常规页面和 wiki 文章。按蛞蝓页 export const query = graphql` q
jsp - 检查是否设置了 JSP 片段
我遇到了以下教程 JSP tricks to make templating easier?用于使用 JSP 创建页面模板(我怎么这么久都没有想到这个？!？)。但是，在进行了一些搜索之后，我似乎无法弄
模型的 Django HTML 片段
我是 Django 的新手，我试图找出如何将 HTML 片段与模型相关联。我的 HTML 片段只是一个 div。我想重用那个 div(你可以把它想象成一个缩略图) 情况是这样的:在我的主页中，我想显
Vim 片段，没有片段/模板插件
我经常使用 vim，但我的工作流程通常迫使我与其他 IDE 交互，所以我不是一个像上帝一样的 vim super 用户，我也不想很快成为。 Vim 不是我的 IDE，我也不希望它是。这是一款快速轻便的
如果前面的脚本失败，则执行或不执行 JavaScript 片段
我刚刚了解到一个关于在抛出错误时执行 Javascript 的重要事实。在我开始对此下结论之前，我最好验证一下我是否正确。给定一个包含 2 个脚本的 HTML 页面: 脚本1: doSometh
google-chrome - 片段-标识符已被声明
我是在Chrome片段中编写的: let myVar = someValue; 当我尝试第二次运行它时，它说该变量已被声明并在第一行引发错误。错误是: Uncaught SyntaxError: I
opengl - 同一程序中可以有多个像素(片段)着色器吗？
我想要两个像素着色器；首先要做一件事，然后再做其他事情。这是可能的，还是我必须将所有内容打包到一个着色器中？最佳答案您可以这样做，例如通过从主入口点对在各种着色器对象中实现的函数进行函数调用。 m
syntax-error - 有条件的情况下如何正确使用加法？片段
我正在尝试检查汽车前面是否有任何障碍物。假设汽车在位置“2”。我的目标是检查位置“3”处是否有障碍物。可能没有明确的障碍事实，这意味着在特定位置没有障碍。我检查使用是否存在有条件。但是在规则 r6
javascript - 在文本区域内添加 Javascript 片段
我想在文本区域内编写一个 JavaScript，而不运行 JavaScript。显示为一些可复制的文本。我使用 jquery 同时插入文本区域和代码片段: $("#copy-snippet-cont
regex - 解释一下这个 .htaccess 片段
有人可以解释以下 htacess 行，我理解部分内容，但想要更深入的知识。作为注释，我假设它按预期工作，这目前还没有上线，我只是在阅读一些工作簿，这是打印的。 // Don't understand
f# - 方便的 F# 片段
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
javascript - 如何在更改选择列表值时附加和删除 html 片段
我目前正在尝试使用 Jquery 根据下拉列表的值附加音频标签 html 列表。主要问题是，当选择值更改时，empty() 和append() 方法根本不会将html 注入(inject)到播放列表d

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

php - 为什么我的 HTML 片段出现在页面上并破坏了它？它与PHP相关吗？