Почему части моего HTML появляются на странице и ломают ее? Это связано с PHP? - PullRequest
Новая
       17

Почему части моего HTML появляются на странице и ломают ее? Это связано с PHP?

2 голосов
/ 25 марта 2010

Я создаю сайт на PHP, HTML, CSS и использую здоровую дозу jQuery javascript. Сайт выглядит абсолютно нормально в моих браузерах Mac, но по какой-то причине, когда мой клиент использует PC Safari, он видит странные фрагменты моего HTML-кода, которые появляются на странице.

Вот несколько (маленьких) примеров снимков экрана:

li

Рисунок 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, но я не могу понять, почему он это сделал.

Вот версия View Source обслуживаемого HTML в соответствии с запросом: (IP-адрес был скрыт для вашего FYI) 

<!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>

Ответы [ 4 ]

3 голосов
/ 25 марта 2010

PHP никогда не будет производить никаких различий между браузерами (если вы не работаете над тем, чтобы сделать это). Он скомпилирован на стороне сервера, поэтому браузер видит только HTML / CSS / Javascript.

2 голосов
/ 25 марта 2010

Вам абсолютно необходимо сгенерировать действительный HTML с правильным DOCTYPE, который будет отображаться браузерами в стандартном режиме. Когда вы этого не сделаете, браузеры пытаются исправить ошибки, которые они считают наилучшими из своих возможностей. Хотя существует (предположительно) только один стандартный способ отображения действительного HTML, не существует правил для обработки недействительного HTML, поскольку множество возможных ошибок бесконечно. Неработающий HTML (он же тег суп) может быть гораздо более кросс-браузерным.

Теперь, тот факт, что вы включили PHP в качестве первого подозреваемого, говорит о том, что у вас нет четкого представления о том, как веб-технологии работают и взаимодействуют. Все в порядке (мы все должны начать где-то учиться), но вы должны знать, что PHP - это язык на стороне сервера. Он может генерировать HTML (и CSS, JavaScript или даже изображения), но браузер получает только его вывод. Когда ваша страница выглядит плохо, прибегните к меню «Просмотр исходного кода» вашего браузера в качестве первого инструмента отладки.

Обновление

Вы можете использовать это: http://validator.w3.org/#validate_by_input

Ваш HTML вызывает 55 ошибок (однако, вероятно, что все они имеют один и тот же источник). Это также хорошая идея для проверки CSS.

0 голосов
/ 25 марта 2010

Я проверил ваш HTML, и появилось только три вещи: у вас есть две ссылки с пробелами: <li><a class='title' href='http://28.5.337.28/~habiall2/?page=construction volunteer'>Volunteer</a><li> и <li><a href='http://28.5.337.28/~habiall2/?page=non-construction volunteer'>Non-Construction </a>

и где-то вы использовали амперсанд вместо &, что незначительно, но я полагаю, что может вызывать проблему. Я также не могу заставить страницу неправильно отображаться в Chromium или Firefox, но у меня нет CSS или JS. Возможно ли, что кто-то из вас имеет дело с Javascript? Попробуйте удалить все ваши JS и посмотреть, если ошибка все еще там.

0 голосов
/ 25 марта 2010

Глядя на html, вам не хватает тега "<html>" в заголовке, он должен появиться сразу после типа документа.Я полагаю, что это важно для предотвращения ошибок синтаксического анализа.

Как и предполагал Альваро, вам нужно убедиться, что оно действительно для лучшей кросс-браузерной совместимости.

Использовать валидатор W3C: http://validator.w3.org/ для проверки вашего HTML

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...