我在使用 Chrome 浏览器时遇到问题。当我访问其他页面时它很好，但是当我访问我的 reservation.php 页面时，在检查 View 中的 html 中插入了一个空白空间，但在源 View 中却很好。它破坏了我的设计，我已经尝试了许多修复，但仍然无法正常工作。它破坏了我的网页设计。这个问题只发生在 chrome 和试过的 opera，ie 和 firefox 中，它工作得很好。
HTML 源 View
网页浏览
Chrome 检查
正如你在这里看到的，元数据被插入到正文中，元数据之前有一个空白空间。
<!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">
© UVCCS Students ™ All Rights Reserved 2013-2014 </div>
</div>
</div>
</body>
</html>
最佳答案
您的 HTML 中一定有错误，因为在 Chrome 检查器中 <meta>和 <link>标签放置在 <body> 中, 不在 <head> .
关于php - Chrome HTML 正文扰乱了标签并破坏了设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15321948/