Question

编辑：通过验证器传递HTML，只是放置错误并警告免费的HTML代码。

另一个编辑：好的，我想我们正在某个地方。谢谢大家指出一切。似乎我现在可以使用经过验证的版本使页面正常工作，有点搞乱CSS，但现在它会变得更加顺畅。

以下是网站上的示例页面，我尝试选择最小的一个。如果没有指定DOCTYPE，则页面正确运行;一旦我添加了doctype，它就会破坏页面。

文章部分正在扩展以适应所有内容，而不是隐藏内容和滚动。我知道显示问题的最简单方法是提供完整的CSS和HTML供您查看。添加＆＃39;！DOCTYPE html＆＃39;到顶部，看看它与文章部分的不同之处。其他一切都很好！它正在扩展以包含所有内容而不是隐藏它并允许用户使用文章容器侧面的滚动条。我很沮丧，因为我必须在更改移动版本的变量之前解决这个问题。

如何解决此问题，以便在标准模式下正确显示，因为我听说在怪癖模式下运行是不好的。抱歉发布整个CSS代码和HTML代码，但这是我知道如何解释问题的唯一方法，我对此并不擅长。

HTML在怪癖模式下，添加doctype以查看错误的显示。

<html lang="en">
<head>
<title>
CDD Research
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<header>
<img class="mobile" alt="mobile logo" src="img/bestlogo.png" width="212" height="84">
<nav class="desktop">
<img alt="cdd research" src="img/bestlogo.png" width="283" height="112"><a href="index.html">Home</a> | <a href="cdd.html">CDD</a> | <a href="founder.html">Founder</a> | <a href="charityauction.html">Art for Charity</a> | <a href="donate.html">Donate</a> | <a href="resources.html">Resources</a> | <a href="http://gaanjo.com/">Gaanj&#x014D;!</a> 
</nav>
<nav class="mobile">
<div class="dropdown">
<button class="dropbtn">Navigation</button>
<div class="dropdown-content">
<a href="index.html">Home</a>
<a href="cdd.html">CDD</a>
<a href="founder.html">Founder</a>
<a href="charityauction.html">Art for Charity</a>
<a href="donate.html">Donate</a>
<a href="resources.html">Resources</a>
<a href="www.gaanjo!.com">Gaanj&#x014D;!</a>
</div>
</div>
</nav>
</header>
<article>
<h1>Childhood Disintegrative Disorder Research is a 501(c)(3)nonprofit
</h1>
<img class="mobile" alt="snow child" src="img/snowchild.png" width="250" height="250">
<div class="cddleft">
<h3>
What is CDD?
</h3>
<p>
Childhood disintegration disorder robs children of their ability to interact with others in a most horrible way. Children with CDD begin life as any other child would, rapidly acquiring skills and exhibiting all the usual behaviors. Then without warning and for currently unknown reasons, the child regresses and loses critical acquired skills such as toilet training and the ability to speak coherently. Even with rapid onset, the child may tearfully beg caregivers for an explanation before losing the ability to speak. 
</p>
<br>
<h3>How can you help?
</h3>
<p>
Through donations, charity auctions, sales, and promotional material, CDD Research puts the power in your hands to make the world a better place for children affected by this harrowing disease. Please take some time to browse CDD Research for resources and options to contribute to our cause.
</p>
<br>
<h3>How can we help?
</h3>
<p>
Our mission at CDD Research is to facilitate a complete understanding of childhood disintegration disorder by aiding researchers currently studying CDD as well as initiating new research projects. CDD Research endeavors to 
facilitate the rapid development of promising new therapies and treatments for those affected by childhood disintegration disorder. CDD Research seeks sufficient understanding of childhood disintegration disorder through active recruitment of new participants for research programs, assistance with funding of full genomic sequencing for CDD-affected families, support of the MSSNG database, and the creation of innovative ways to compile new data.
</p>
</div>
<div class="cddright">
<img class="large" alt="snow child" src="img/snowchild.png" width="500" height="500">
<br>
<table class="social">
<tr>
<td>
<a href="http://www.facebook.com"><img class="social" alt="fb" src="img/fb.png" width="100" height="100"></a>
</td>
<td>
<a href="http://www.medium.com"><img class="social" alt="medium" src="img/mds.png" width="100" height="100"></a>
</td>
<td>
<a href="http://www.twitter.com"><img class="social" alt="medium" src="img/tw.png" width="100" height="100"></a>
</td>
</tr>
</table>
</div>
</article>
<footer>
<p>Copyright information <a href="mailto:fakeaddress@fake.com">fakeaddress@fake.com</a>
</p>
</footer>
</body>
</html>

和CSS代码。

html {
  background-color: #000000;
  font-family: helvetica, verdana, arial;
  text-align: left;
  font-size: 1em;
  width: 100%;
  height: 100%;
  min-width: 995px;
  margin: 0px;
  padding: 0px;
}

header {
  color: #FCD5EE;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  width: 100%;
  height: 20%;
}

nav.desktop {
  display: block;
}

nav.mobile {
  display: none;
}

article {
  background-color: #FFFFFF;
  width: 95%;
  height: 70%;
  border: .5em solid #9AF4FB;
  border-radius: 1.125em;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-left: auto;
  margin-right: auto;
  clear: auto;
}

footer {
  color: #FCD5EE;
  text-align: center;
  font-weight: bold;
  width: 100%;
  height: 5%;
}

a {
  color: #FCD5EE;
  text-decoration: none;
}

a:hover {
  color: #9AF4FB;
}

a.plain {
  color: #000000;
  font-weight: bold;
}

a.resource {
  color: #000000;
  font-size: 1.125em
}

a.resource:hover {
  color: #000000;
}

a.item {
  color: #000000;
}

p {
  margin: 0px;
}

p.item {
  font-weight: bold;
}

p.center {
  text-align: center;
}

p.store {
  font-size: 1.125em;
  text-align: center;
}

h1 {
  background-color: #FCD5EE;
  font-size: 2em;
  text-align: center;
  font-weight: normal;
  border: .25em solid #FCD5EE;
  border-radius: 2em;
  margin-top: 25px;
}

h2 {
  font-size: 1.125em;
  text-align: center;
  font-weight: normal;
}

h3 {
  background-color: #9AF4FB;
  font-size: 1.5em;
  text-align: center;
  font-weight: normal;
  border: .25em solid #9AF4FB;
  border-radius: 1.5em;
  margin-top: 0px;
}

h4 {
  background-color: #FCD5EE;
  font-size: 1.125em;
  text-align: center;
  font-style: italic;
  width: 430px;
  border: .25em solid #FCD5EE;
  border-radius: 1.125em;
  font-weight: normal;
  margin-left: auto;
  margin-right: auto;
}

ol {
  background-color: #FCD5EE;
  list-style-type: none;
  border: .25em solid #FCD5EE;
  border-radius: 1.5em;
  padding: 0px;
}

ol.cdd {
  font-size: 1.125em;
  text-align: center;
  font-weight: bold;
}

ol.address {
  max-width: 350px;
  font-size: 1.125em;
  text-align: center;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
}

img.mobile {
  display: none;
  margin-left: auto;
  margin-right: auto;
}

img.item {
  display: inline-block;
}

img.resource {
  display: block;
  position: absolute;
  margin-top: 25px;
}

img.large {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

div.left3 {
  width: 50%;
  float: left;
}

div.right3 {
  width: 48%;
  float: right;
}

div.left2 {
  width: 45%;
  float: left;
}

div.right2 {
  width: 55%;
  float: right;
}

div.cddright {
  width: 55%;
  float: right;
}

div.cddleft {
  width: 45%;
  float: left;
}

div.dropdown {
  position: relative;
  display: inline-block;
}

div.dropdown-content {
  display: none;
  position: absolute;
  background-color: #000000;
  text-align: center;
  width: 300px;
}

div.dropdown-content a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
}

div.dropdown:hover div.dropdown-content {
  display: block;
}

div.mobile {
  display: none;
  margin-left: auto;
  margin-right: auto;
}

button.dropbtn {
  background-color: #000000;
  color: #FCD5EE;
  font-size: 1em;
  font-family: helvetica, verdana, arial;
  text-transform: uppercase;
  font-weight: bold;
  width: 300px;
  border: none;
}

table {
  background-color: #9af4fb;
  border: .25em solid #9af4fb;
  border-radius: 1.125em;
  margin-left: auto;
  margin-right: auto;
}

table.desktop {
  display: block;
  background-color: #FFFFFF;
  border: none;
  margin-left: auto;
  margin-right: auto;
}

table.social {
  background-color: #FFFFFF;
  border: none;
  width: 75%;
  text-align: center;
}

Answer 1

您的所有网页内容都应该放在<body>内。您的<header>和<footer>都在<body>之外。

<!DOCTYPE html>
<html>
<head>
<title>
CDD Research: Donate Now
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="style.css" rel="stylesheet">
</head>

<body>
<header>
<img class="mobile" alt="mobile logo" src="img/bestlogo.png" width="212.25px" height="84px">
<nav class="desktop">
<img alt="cdd research" src="img/bestlogo.png" width="283px" height="112px"><a href="index.html">Home</a> | <a href="cdd.html">CDD</a> | <a href="founder.html">Founder</a> | <a href="charityauction.html">Art for Charity</a> | <a href="donate.html">Donate</a> | <a href="resources.html">Resources</a> | <a href="http://gaanjo.com/">Gaanj&#x014D!</a> 
</nav>
<nav class="mobile">
<div class="dropdown">
<button class="dropbtn">Navigation</button>
<div class="dropdown-content">
<a href="index.html">Home</a>
<a href="cdd.html">CDD</a>
<a href="founder.html">Founder</a>
<a href="charityauction.html">Art for Charity</a>
<a href="donate.html">Donate</a>
<a href="resources.html">Resources</a>
<a href="www.gaanjo!.com">Gaanj&#x014D!</a>
</div>
</div>
</nav>
</header>
<article>
<h1>Item Name</h1>
<table class="desktop">
<tr>
<td>
<img alt="item image" width="300px" height="300px">
</td>
<td>
<p>Detailed description of item goes here. Clicking the 'donate' link below will redirect you to Paypal's secure server.
<br>
<br>
Shipping and handling included with mandatory donation amount, delivery will take an estimated 2-3 weeks. 100% of profits from all items bought in CDD Research's store go to charity. For customers living outside the contiguoius 48 United States and international customers, please send an email via <a class="plain" href="mailto:fakeaddress@fake.com">fakeemail@fake.com</a> to recieve pricing for your location.
</p>
<h2>Price - $#.##</h2>
<img class="center" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif">
</td>
</tr>
</table>
<div class="mobile">
<img alt="item image" width="300px" height="300px">
<br>
<p>
Detailed description of item goes here. Clicking the 'donate' link below will redirect you to Paypal's secure server.
<br>
<br>
Shipping and handling included with mandatory donation amount, delivery will take an estimated 2-3 weeks. 100% of profits from all items bought in CDD Research's store go to charity. For customers living outside the contiguoius 48 United States and international customers, please send an email via <a class="plain" href="mailto:fakeaddress@fake.com">fakeemail@fake.com</a> to recieve pricing for your location.
</p>
<h2>Price - $#.##</h2>
<img class="center" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif">
</div>
<a class="item" href="donate.html">
<br>
<h3><a class="item" href="donate.html">Go Back</a></h3>
</article>
<footer>
<p>Copyright information <a href="mailto:fakeaddress@fake.com">fakeaddress@fake.com</a>
</p>
</footer>
</body>
</html>

文章容器扩展为以标准模式显示所有内容，在怪癖模式下工作正常。只有部分错了

1 个答案: