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

标签 php jquery html css

我一直在用 PHP、HTML、CSS 构建一个网站，并使用适量的 jQuery javascript。该网站在我的 Mac 浏览器上看起来完全正常，但由于某种原因，当我的客户使用 PC Safari 时，她发现页面上显示了我的 HTML 的奇怪部分。

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

li

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

submenu

图 2:这是 <div class='submenu'> 的一部分由于 div 标签未正确呈现，因此 CSS 无法正确设置该 div 的整个内容的样式。

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

图 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/

上一篇：html - 如何确保 <td> 的高度恰好是 200px？

下一篇：JavaScript CSV 验证

相关文章：

javascript - 防止点击重定向时的子标签

php - php 和 mysql 中的奇怪错误

javascript - 如何在单击按钮时显示数据库中的随机行？

javascript - 如何修改此 jQuery 插件 slider 的滚动和方向？

html - 有没有证据表明其他浏览器会支持谷歌浏览器拖拽下载到桌面？

javascript 不会使用 XMLHttpRequest 找到 html/javascript 导入代码的 id/class

html - 可滚动但无滚动条

php函数参数

php - Codeigniter 上的分页始终在第 1 页上选择

javascript - 仅用于 if 的简写

©2024 IT工具网  联系我们