【发布时间】：2023-03-25 08:03:01
【问题描述】：
我在 Firefox 中看起来很棒，但由于某种原因，所有文本似乎都不会包含在 Chrome 中各自的 div 中。 Chrome 似乎正在为 ul 和 h1 元素分配随机高度值，但对于我的生活，我似乎无法弄清楚为什么。编辑：好吧，我要气疯了。我的意思是它甚至可以在资源管理器中工作............ Chrome 的（阅读“我的”）问题是什么！？！？！？！？！？！
我删除了屏幕截图，因为我做了一些更改。我刚刚将它上传到网站 musingsofamachiavellian.com，您应该能够在那里看到这个问题的全部荣耀。
非常感谢，修复就像添加 html { height:100%;} 一样简单
这是我从头开始编写的第一个代码，所以要温柔：|
CSS：
body {
background-color: #a5e2a8; /*A light green*/
min-width: 960px;
}
#Foundation {
width:960px;
height:100%;
background-color: #3b3b3b; /*Milk White*/
background-color: rgba(59,59,59,0.9);
/* background-color: #212121; /*A light black*/
}
#Header {
height:80px;
width:940px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
}
#TitleText{
height:80px;
width:940px;
font-family: Cambria math;
font-size: 48px;
padding: 16px;
color: #F70D1A;
vertical-align: top;
}
#ButtonBar{
height:32px;
width:940px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
}
#ButtonBarUL{
height:32px;
width:940px;
margin:0px;
padding: 6px;
}
.Button {
text-align: center;
font-family: Cambria math;
font-size: 16px;
padding-top: 0px;
padding-left: 0px;
color: #F70D1A;
display: inline-block;
list-style-type: none;
vertical-align: top;
}
#SidebarContainer {
height:100%;
width:160px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
}
.SideBarContent {
width:140px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
text-align: center;
font-family: Cambria math;
font-size: 12px;
color: #212121;
}
#MainContainer {
height:100%;
width:770px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
margin-left:0px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
}
.ArticleContainer {
height:100%;
width:750px;
margin: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
}
.ArticleHead {
height:100%;
width:750px;
margin: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
border-bottom:1px solid;
font-family: Cambria math;
font-size: 14px;
color: #F60D1B;
}
.ArticleContent {
height:100%;
width:750px;
margin: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
font-family: Cambria math;
font-size: 12px;
color: #212121;
}
#Footer {
height:32px;
width:940px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
background-color: #FEFCFF; /*Milk White*/
background-color: rgba(254,252,255,0.9);
float:left;
font-family: Cambria math;
font-size: 12px;
color: #212121;
clear: both;
list-style-type: none;
text-align: center;
}
ul, li {
list-style-type: none;
}
网站：
<!DOCTYPE html>
<head>
<link rel='stylesheet' type='text/css' href='core.css' />
<script type='text/javascript' src='script.js'></script>
<title>Musings</title>
</head>
<body>
<div id='Foundation'>
<header id='Header'>
<h1 id='TitleText'>Musings of a Machiavellian</h1>
</header>
<div id='ButtonBar'>
<ul id='ButtonBarUL'>
<li class='Button'>About |</li>
<li class='Button'>Past |</li>
<li class='Button'>Future |</li>
<li class='Button'>FAQ |</li>
</ul>
</div>
<section id='SidebarContainer'>
<div class='SideBarContent'>
<p>Chronicles</p>
</div>
</section>
<section id='MainContainer'>
<div class='ArticleContainer'>
<div class='ArticleHead'>
<h1>Hey! Thanks for stopping by. We're currently under construction...</h1>
</div>
<article class='ArticleContent'>
<p>This will be blog 2.0 - A webspace for own personal experimentation, and to chronicle (err.... blog) some musings.</p>
<p>They'll range in topic from politics, to science, to strategy, to economics. Stay tuned, or simply send me a message.</p>
<p>I'm by no means a web-development expert. If you see something that should be improved, I more than welcome your suggestions. Feel free to shoot me an e-mail!</p>
</article>
</div>
<div class='ArticleContainer'>
<div class='ArticleHead'>
<h1>I hate chrome...</h1>
</div>
<article class='ArticleContent'>
<p>If you're viewing this page in Chrome, chances are it looks jumbled. The reason, no clue... but the search for an answer is quickly turning intot he bane of of my existance.</p>
<p>Frustration level.... over 9000! I mean, it even works in internet exploder...</p>
</article>
</div>
</section>
<footer id='Footer'>
<ul id='ContactInfo'>
<li>info'at'Musings...</li>
</ul>
</footer>
</div>
</body>
</html>
【问题讨论】：
-
Chrome 拥有优秀的开发者工具。您可以使用它来检查实时页面上的框模型、计算属性等，以帮助调试。 developers.google.com/chrome-developer-tools
-
不确定这是否能解决问题，但您应该在文件顶部添加
<!DOCTYPE html>。 -
嗯！DOCTYPE 打破了左栏...我以为我在某处读到它在 HTML 5 中已被贬值。
-
它没有被弃用，它实际上是强制性的。见stackoverflow.com/questions/12870294/…
-
太棒了，感谢您的信息！