0

我在使用 chrome 时遇到了这个网页的问题。当我访问其他页面时它很好,但是当我访问我的 reservation.php 页面时,我在检查视图中的 html 中插入了一个空白空间,但在源视图中很好。它破坏了我的设计,我尝试了很多修复,但仍然无法正常工作。它破坏了我的网页设计。这个问题只发生在chrome和尝试过的opera中,ie和firefox它工作得很好。

HTML 源视图 网页 在此处输入图像描述 视图 在此处输入图像描述

CHROME INSPECT
正如您在此处看到的,元数据插入到正文中,元数据之前有一个空白空间。 在此处输入图像描述

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <!--meta name="viewport" content="width=device-width, initial-scale=1" /-->
    <title>Vasquez Compound</title>
    <link rel="stylesheet" type="text/css" href="http://localhost//public/styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost//public/styles/default.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost//public/styles/style.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/public/scripts/javascripts/jquery-ui/themes/jquery.ui.all.css">
        <link rel="stylesheet" type="text/css" href="http://localhost//public/styles/reserved-units.css" />
    <link rel="icon" type="image/png" href="http://localhost//public/favicon.png" />
    <!--[if gte IE 9]>
      <style type="text/css">
        * {
           filter: none;
        }
      </style>
    <![endif]-->
    <!--[if lt IE 9]>
    <script language="javascript" type="text/javascript" src="public/scripts/javascripts/html5.js"></script>
    <![endif]-->
    <script language="javascript" type="text/javascript" src="http://localhost//public/scripts/javascripts/jquery.1.8.2.js"></script>
    <script language="javascript" type="text/javascript" src="http://localhost/public/scripts/javascripts/jquery-ui/jquery.ui.core.js"></script>
    <script language="javascript" type="text/javascript" src="http://localhost/public/scripts/javascripts/jquery-ui/jquery.ui.widget.js"></script>
    <script language="javascript" type="text/javascript" src="http://localhost/public/scripts/javascripts/jquery-ui/jquery.ui.datepicker.js"></script>
    <script language="javascript" type="text/javascript" src="http://localhost//public/scripts/javascripts/main.js"></script>
    </head>
    <body>
    <noscript>
        <div id="no-script-browser">
            <h1>
                Opss its seems your browser this likes our site. Activate your Javascript to  view our website.
                <br> You will be redirected to google.com after 10 seconds.
            </h1>
        </div>
        <div id="no-script-browser-overlay">
            <table> <tr><td></td></tr> </table>
        </div>
        <meta http-equiv="refresh" content="10;url=http://google.com/">
    </noscript>
    <div id="wrapper">
      <div id="header">
        <div id="topbar">
          <div id="topbar-content">
            <div class="left upper">For tenants click here to <a href="login.php">LOGIN</a><!--OR <a href="">CREATE AN ACCOUNT</a>--> </div>
            <div class="left mleft10"> 
                <a href="contact-us.php">SUPPORT</a> <!--| <a href="">MY UNIT</a!--> | 
                <a href="reservation.php">RESERVED UNITS (<span id="session-reserved-units">1</span>)</a> </div>
            <div class="right">
              <form method="get">
                <input type="text" name="q" id="q" placeholder="Keyword to search" />
                <input type="submit" value="Search" />
              </form>
            </div>
          </div>
          <div class="clear"></div>
        </div>
        <div id="nav">
          <ul>
            <li id="home"><a href="http://localhost/"><img src="http://localhost//public/styles/images/home.png" width="24" height="26"></a></li>
            <li><a href="units.php">Units</a></li>
            <li><a href="locations.php">Locations</a></li>
            <li><a href="reservation.php" class="selected">Reservation</a></li>
            <li><a href="quote.php">Make a Quote</a></li>
            <li><a href="contact-us.php">Contact Us</a></li>
            <li><a href="about.php">About</a></li>
          </ul>
          <div class="clear"></div>
        </div>
            <div id="banner">
          <div class="left"> 
                    <img src="http://localhost//public/images/banners/reservation.png" width="745" height="250">
          </div>
          <div class="right">
            <ul id="utypes">
              <li> <a href="" class="odd-type">Bungalows</a> </li>
              <li> <a href="" class="even-type">Duplex</a> </li>
              <li> <a href="" class="odd-type">Condominiums</a> </li>
              <li> <a href="" class="even-type">Apartments</a> </li>
            </ul>
          </div>
          <div class="clear"> </div>
        </div>
          </div>
      <div id="contents"> <script language="javascript" type="text/javascript">
        $(document).ready(function(e) {
            $("input.mau").click(function(e) {
                $("input.mau").each(function(index, element) {
                    element.disabled = true;
                });
                $("input.umau").each(function(index, element) {
                    element.disabled = false;
                });
                $("input.chk").each(function(index, element) {
                    element.checked = true;
                });
            });
            $("input.umau").click(function(e) {
                $("input.mau").each(function(index, element) {
                    element.disabled = false;
                });
                $("input.umau").each(function(index, element) {
                    element.disabled = true;
                });
                $("input.chk").each(function(index, element) {
                    element.checked = false;
                });
            });
            $("input.chk").each(function(index, element) {
                $(element).click(function(e) {
                    $("input.mau").each(function(i, el) {
                        el.disabled = $("input.chk:checked").get().length  == $("input.chk").get().length ? true : false;
                    });
                     $("input.umau").each(function(i, el) {
                        el.disabled = $("input.chk:checked").get().length  > 0 ? false : true;
                    });
                });
            });
        });
    </script>
    <div class="page-contents">
      <div id="reserved-units">
        <form method="post">
        <div class="controls"> 
            <input type="button" value="Check All Units" class="mau" />
            <input type="button" value="Uncheck All Units" class="umau"  disabled />
            <input type="submit" value="Post Reservations" class="right" name="post-reservation"  />
            <input type="submit" value="Remove Selected Units" class="right" name="remove-units"  />
        </div>
            <div class="img-unit"> <img src="http://localhost//public/images/units/d1f92cf44b49d8ecaeda81ded08c8f97.jpg" class="unit-image">
          <div class="label">
            <input type="checkbox" value="1" class="chk" name="uid[]" />
            <b title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis.Unit 1"> Lorem Ipsum Dolor Sit Ame... </b> </div>
        </div>
            <span class="clear"></span>
        </form>
      </div>
    </div>

    </div>
    <div id="footer"> 
        <div id="footer-content">
            <div class="left pd10 ftw">
                <h4>HOUSE TYPES</h4>
                <hr />
                <ul>
                  <li> <a href="" class="odd-type">Bungalows</a> </li>
                  <li> <a href="" class="even-type">Duplex</a> </li>
                  <li> <a href="" class="odd-type">Condominiums</a> </li>
                  <li> <a href="" class="even-type">Apartments</a> </li>
                </ul>
            </div>
            <div class="left pd10 ftw">
                <h4>Services</h4>
                <hr />
                <ul>
                  <li> <a href="" class="odd-type">Make a quote</a> </li>
                  <li> <a href="" class="even-type">Maintainance</a> </li>
                  <li> <a href="" class="odd-type">Emergency response</a> </li>
                  <li> <a href="" class="even-type">Other Services</a> </li>
                </ul>
            </div>
             <div class="right pd10">
                <h4>Contact Us</h4>
                <hr />
                <form method="post" action="contact-us.php" id="frmFooterContactForm">
                <ul class="left">
                  <li><input type="text" name="fname" placeholder="Enter full name" required /></li>
                  <li><input type="email" name="email" placeholder="Enter valid email address" required /></li>
                  <li><input type="text" name="mno" placeholder="Enter mobile number" required /></li>
                  <li><input type="text" name="subject" placeholder="Enter subject" required /></li>
                </ul>
                <div class="right rbox">
                <textarea placeholder="Enter your message" name="content" required></textarea>
                </div>
                <input type="submit" name="smsg" id="smsg" value="Send Message" required class="clear" />
                </form>
            </div>
          </div>
           <div class="clear align-center" id="end">  
                &copy; UVCCS Students &trade; All Rights Reserved 2013-2014        </div>
      </div>
    </div>
    </body>
    </html>
4

3 回答 3

1

您的 HTML 中的某个地方一定有错误,因为在 Chrome 检查器中,<meta>and<link>标签放在 . <body>,而不是<head>.

于 2013-03-10T12:04:28.073 回答
1

好的..我找到了解决方案..似乎有一些看不到的未知字符..我不知道它是如何到达那里的,但是我尝试复制代码并粘贴到记事本++中,然后从记事本++复制代码然后替换php文件..它解决了...

感谢您的所有帮助和建议...

于 2013-03-10T13:26:38.293 回答
1

我遇到了同样的问题,我的所有代码都符合 W3C 标准,并且在 Chrome 检查器中,所有头部内容都在 body 标记中。经过研究,我发现当文件使用 UTF-8 WITH BOM 编码时,Chrome Inspector 会出错。

要解决此问题,请使用UTF-8 WITHOUT BOM对文件进行编码。

于 2015-02-13T16:00:44.787 回答