文章容器扩展以在标准模式下显示所有内容，在怪癖模式下工作正常。只错了一部分
Article container expands to show all content in standard mode, works fine in quirks mode. Only part wrong
编辑：运行 HTML 通过验证器，刚刚放置了无错误和警告的 HTML 代码。
另一项编辑：好的，我想我们正在取得进展。谢谢大家指出一切。似乎我现在可以使用经过验证的版本使页面正常工作，CSS 有点混乱，但现在变得更顺畅了。
这是网站上的示例页面，我试着选了最小的一个。当没有指定 DOCTYPE 时，页面运行正常；一旦我添加了文档类型，它就会破坏页面。
文章部分正在扩展以适应所有内容，而不是隐藏内容和滚动。我知道显示问题的最简单方法是提供完整的 CSS 和 HTML 供大家查看。将 '!DOCTYPE html' 添加到顶部，看看它读取文章部分的方式有何不同。其他一切都很好！它正在扩展以包含所有内容而不是隐藏它，并允许用户使用文章容器侧面的滚动条。我很沮丧，因为我必须在更改移动版本的变量之前解决这个问题。
如何解决这个问题才能在标准模式下正确显示，因为我听说 运行 在 quirks 模式下不好。我很抱歉 post 整个 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ō!</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ō!</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;
}
您页面的所有内容都应该放在 <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ō!</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ō!</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>
编辑：运行 HTML 通过验证器，刚刚放置了无错误和警告的 HTML 代码。
另一项编辑：好的，我想我们正在取得进展。谢谢大家指出一切。似乎我现在可以使用经过验证的版本使页面正常工作，CSS 有点混乱，但现在变得更顺畅了。
这是网站上的示例页面，我试着选了最小的一个。当没有指定 DOCTYPE 时，页面运行正常；一旦我添加了文档类型，它就会破坏页面。
文章部分正在扩展以适应所有内容，而不是隐藏内容和滚动。我知道显示问题的最简单方法是提供完整的 CSS 和 HTML 供大家查看。将 '!DOCTYPE html' 添加到顶部，看看它读取文章部分的方式有何不同。其他一切都很好！它正在扩展以包含所有内容而不是隐藏它，并允许用户使用文章容器侧面的滚动条。我很沮丧，因为我必须在更改移动版本的变量之前解决这个问题。
如何解决这个问题才能在标准模式下正确显示，因为我听说 运行 在 quirks 模式下不好。我很抱歉 post 整个 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ō!</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ō!</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;
}
您页面的所有内容都应该放在 <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ō!</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ō!</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>