php - 意外的引号破坏了 PHP 网页中的布局

Question

我正在使用 index.php 和“包含”来拉入网站的各个页面。我看到的问题是，当主页加载时，有两个引号将主要内容向下推。奇怪的是，当您单击任何其他页面（甚至是“主页”链接）时，它们会消失并且一切都会恢复正常。

在这里，您可以使用 Chrome 的 Inspect Element 工具查看标记中的引号：

这是 index.php 中的代码：

<?php include('header.php') ?>
<div id="acontainer">
  <?php include('homepage.php') ?>
</div>
<?php include('footer.php') ?>

这是菜单的代码，它将不同的 PHP 文件加载到#acontainer 中：

<ul>
      <li><a class="menui" href="#" onclick="$('#acontainer').load('homepage.php');return false;"><span>Home</span></a></li>
      <li><a class="menui" href="#" onclick="$('#acontainer').load('tuition.php');return false;"><span>Tuition</span></a></li>
      <li><a class="menui" href="#" onclick="$('#acontainer').load('about.php');return false;"><span>About Me</span></a></li>
      <li><a class="menui" href="#" onclick="$('#acontainer').load('contact.php');return false;"><span>Contact Me</span></a></li>
      <li><a class="menui" href="#" onclick="$('#acontainer').load('faq.php');return false;"><span>FAQ</span></a></li>
    </ul>

这是 homepage.php 中的代码：

<script type="text/javascript">

$(function(){
    $('#slideshow').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 12000,
        pager:  '#slider_nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#slider_nav li:eq(' + (idx) + ') a';
        }
    });
});

</script>

<div class="header_blog">
    <div id="slider">
      <!-- start slideshow -->
      <div id="slideshow">
        <div class="slider-item"><a href="#" onClick="$('#acontainer').load('tuition.php');return false;"><img src="images/simple_img_1.jpg" alt="icon" width="917" height="398" border="0" /></a></div>
        <div class="slider-item"><a href="#" onClick="$('#acontainer').load('about.php');return false;"><img src="images/simple_img_2.jpg" alt="icon" width="917" height="398" border="0" /></a></div>
        <div class="slider-item"><a href="#" onClick="$('#acontainer').load('tuition.php');return false;"><img src="images/simple_img_3.jpg" alt="icon" width="917" height="398" border="0" /></a></div>
        <div class="slider-item"><a href="#" onClick="$('#acontainer').load('contact.php');return false;"><img src="images/simple_img_4.jpg" alt="icon" width="917" height="398" border="0" /></a></div>
      </div>
      <div class="clr"></div>
      <!-- end #slideshow -->
      <div class="controls-center">
        <div id="slider_controls">
          <ul id="slider_nav">
            <li><a href=""></a></li>
            <!-- Slide 1 -->
            <li><a href=""></a></li>
            <!-- Slide 2 -->
            <li><a href="#"></a></li>
            <!-- Slide 3 -->
            <li><a href="#"></a></li>
            <!-- Slide 4 -->
          </ul>
        </div>
        <div class="clr"></div>
      </div>
      <div class="clr"></div>
    </div>
    <div class="clr"></div>
    <div class="FBG">
      <div id="quote">
        <p>
        Welcome to <strong>Creative Tuition</strong>, home of personal guitar tuition for musicians of all ages and abilities around the North West of England. Book a free lesson today!
        </p>
      </div>
      <div class="clr"></div>
    </div>

    <div class="FBG" style="border-bottom : none;">   

        <div id="reasons-list">

            <h3 class="level">3 Reasons to Give Creative Tuition a Try</h3>
            <br />
            <ul id="reasons">
                <li>Your first lesson is FREE and includes a complete breakdown of where you are and where you want to be</li>
                <li>5 years of professional teaching experience and Grade 8: Rock Guitar Playing & Theory</li>
                <li>Creative and custom lesson plans completely tailorered for YOU</li>
            </ul>

            <p>Not enough? Find out more at our <a href="#" onClick="$('#acontainer').load('tuition.php');return false;">Tuition Page</a>.</p>
            <div class="clr"></div>.</p>

        </div>

        <div id='mediaspace'>This text will be replaced</div>

        <div id="reasons-video">
            <script type='text/javascript'>
              jwplayer('mediaspace').setup({
                'flashplayer': 'js/player.swf',
                'author': 'Creative Guitar Tuition',
                'file': 'http://www.youtube.com/watch?v=RyXTJkLRSEg',
                'controlbar': 'bottom',
                'width': '470',
                'height': '320'
              });
            </script>

        </div>
                <h3 class="level">Is Creative Guitar Tuition right for you?</h3>
                <br />
                <p>The creative and flexible lesson plan taught at Creative Guitar Tuition was developed through <span class="blue">5 years of professional teaching experience</span> at many of the UK’s major guitar outlets and institutions. This tried and tested teaching method not only includes the best content you will find but (and this is the key), through careful dissection of your ability and goals, we will work together to create a completely customised lesson plan.  This will ensure your musical progression does not deviate from your desired path to becoming a better musician. This will ensure you arrive at your musical destination in the shortest, most efficient and fun way possible.</p>
        <br />
        <div id="level">
            <div class="fourth">
                <h3>Beginner?</h3>
                <p>Are you just beginning your musical journey? Are you short on spare time and tired of trawling the Internet only to find hit and miss information?</p>
            </div>
            <div class="fourth">
                <h3>Intermediate?</h3>
                <p>Are you at intermediate level but feel that you're progression isn’t moving  as fast and in the direction you’d like?</p>
            </div>
            <div class="fourth">
                <h3>Advanced?</h3>
                <p>Are you an advanced player, but you’ve hit a wall and you're not sure how to push on to the next level?</p>
            </div>
            <div class="fourth">
                <h3>Not sure?</h3>
                <p>No matter what your ability, Creative Guitar Tuition will give you a free lesson so you can see just how much better you could be.</p>
            </div>
            <a class="free-lesson" href="#" onClick="$('#acontainer').load('contact.php');return false;" />
        </div>

    </div>
  </div>
          </div>

任何线索可能导致这种奇怪的行为？

非常感谢

score 2 · Accepted Answer

您所看到的“引号”只是单个空格的显示。开发人员工具无法显示空间，因为该空间是空的。为了向您展示空间，开发人员工具使用引号。

解决方案是在包含文件的每个 final 之后删除空格和换行符?>，或者更好的是，只需省略 final ?>。PHP 允许这样做，并且许多开发人员鼓励这样做，以避免您遇到这个确切的问题。

其他不需要的空格来源是和之间的空格或>换行符<。这些并不总是很容易找到或修复。我告诉你放一条评论

<div id="acontainer"><?php include('homepage.php') ?></div>

在一条线上。这在这里有效，但在更复杂的情况下，您需要空格和换行符来增加可读性。在这种情况下，将换行符放在>or之前?>（这是允许的 HTML 和 PHP！）：

<div id="acontainer"
   ><?php include('homepage.php') 
   ?></div>

但只有在您确实遇到不需要的空间问题时才这样做。大多数时候，空间是良性的。

score 1 · Accepted Answer

我正在寻求解决同样问题的帮助。帮助我的是将文件编码为“没有 BOM 的 UTF-8”（Notepad++ 有该选项）。如果您的文件使用 UTF-8 编码，那么这很可能是导致问题的原因。希望它可以帮助偶然发现该线程的人。

php - 意外的引号破坏了 PHP 网页中的布局

2 回答 2

Related

Reference