Chrome 中的空白会改变布局吗？
我遇到了一个奇怪的问题，我终于找到了解决方案，但我不确定为什么会发生这种情况。我有一个由 PHP 生成的页面，因此生成的 HTML 格式并不总是很好。以下是相关代码：
<html>
<head>
<style>
body {background-color: #99ccff;}
div#content {
margin: 0 auto;
text-align: center;
}
div#results_header {
background-color: white;
display: inline-block;
font-family: sans-serif;
font-size: 12px;
margin: 5px 9px 0;
padding-left: 18px;
padding-top: 5px;
text-align: left;
border-bottom: 1px solid;
}
div.header {
display: inline-block;
font-weight: bold;
padding-bottom: 5px;
}
div#ships {
background-color: white;
display: inline-block;
font-family: sans-serif;
font-size: 12px;
height: 180px;
margin: 0 9px 9px;
overflow-y: auto;
padding-left: 18px;
text-align: left;
}
div.status {width: 10px;}
div.name {width: 260px;}
div.flag {width: 40px;}
div.type {width: 50px;}
div.sconum {width: 70px;}
div.call_sign {width: 80px;}
div.imo_number {width: 70px;}
div.upseq {width: 140px;}
div.photo {width: 50px;}
div.my_photo {width: 50px;}
</style>
</head>
<body>
<div id="content" style="width: 880px;">
<div id="results_header" style="width: 840px;">
<div class="name header">Name</div>
<div class="flag header">Flag</div>
<div class="type header">Type</div>
<div class="sconum header">SCONUM</div>
<div class="call_sign header">Call Sign</div>
<div class="imo_number header">IMO #</div>
<div class="upseq header">UPSEQ</div>
<div class="photo header">Photo</div>
<div class="my_photo header">My Photo</div>
</div>
<div id="ships" style="width: 840px;"></div>
</div>
</body>
</html>
为了便于阅读，我对其进行了格式化（例如，CSS 实际上位于外部文件中）。该页面实际上是由 PHP 生成的，因此它看起来并不像这样漂亮。问题就在于此。我上面发布的内容在所有浏览器中显示良好且一致。当我删除“ships”div 之前的空格时，它在 Chrome 中未对齐（Firefox 看起来不错，还没有机会在 IE 中进行测试）。
<body>
<div id="content" style="width: 880px;">
<div id="results_header" style="width: 840px;">
<div class="name header">Name</div>
<div class="flag header">Flag</div>
<div class="type header">Type</div>
<div class="sconum header">SCONUM</div>
<div class="call_sign header">Call Sign</div>
<div class="imo_number header">IMO #</div>
<div class="upseq header">UPSEQ</div>
<div class="photo header">Photo</div>
<div class="my_photo header">My Photo</div>
</div>
<div id="ships" style="width: 840px;"></div>
</div>
</body>
</html>
同样，很容易修复，但我很好奇为什么会发生这种情况。
I was having a curious problem that I finally found a solution to, but I'm not sure why it happens. I have a page that is being generated by PHP, so the resulting HTML is not always nicely formatted. Here's the relevant code:
<html>
<head>
<style>
body {background-color: #99ccff;}
div#content {
margin: 0 auto;
text-align: center;
}
div#results_header {
background-color: white;
display: inline-block;
font-family: sans-serif;
font-size: 12px;
margin: 5px 9px 0;
padding-left: 18px;
padding-top: 5px;
text-align: left;
border-bottom: 1px solid;
}
div.header {
display: inline-block;
font-weight: bold;
padding-bottom: 5px;
}
div#ships {
background-color: white;
display: inline-block;
font-family: sans-serif;
font-size: 12px;
height: 180px;
margin: 0 9px 9px;
overflow-y: auto;
padding-left: 18px;
text-align: left;
}
div.status {width: 10px;}
div.name {width: 260px;}
div.flag {width: 40px;}
div.type {width: 50px;}
div.sconum {width: 70px;}
div.call_sign {width: 80px;}
div.imo_number {width: 70px;}
div.upseq {width: 140px;}
div.photo {width: 50px;}
div.my_photo {width: 50px;}
</style>
</head>
<body>
<div id="content" style="width: 880px;">
<div id="results_header" style="width: 840px;">
<div class="name header">Name</div>
<div class="flag header">Flag</div>
<div class="type header">Type</div>
<div class="sconum header">SCONUM</div>
<div class="call_sign header">Call Sign</div>
<div class="imo_number header">IMO #</div>
<div class="upseq header">UPSEQ</div>
<div class="photo header">Photo</div>
<div class="my_photo header">My Photo</div>
</div>
<div id="ships" style="width: 840px;"></div>
</div>
</body>
</html>
I formatted it for readability (the CSS is actually in an external file, for instance). The page is actually generated by PHP so it doesn't look nearly as pretty as this. Therein lies the problem. What I posted above displays fine and consistent in all browsers. When I remove the whitespace before the "ships" div, it is misaligned in Chrome (Firefox looks fine, haven't had a chance to test in IE yet).
<body>
<div id="content" style="width: 880px;">
<div id="results_header" style="width: 840px;">
<div class="name header">Name</div>
<div class="flag header">Flag</div>
<div class="type header">Type</div>
<div class="sconum header">SCONUM</div>
<div class="call_sign header">Call Sign</div>
<div class="imo_number header">IMO #</div>
<div class="upseq header">UPSEQ</div>
<div class="photo header">Photo</div>
<div class="my_photo header">My Photo</div>
</div>
<div id="ships" style="width: 840px;"></div>
</div>
</body>
</html>
Again, easily fixed, but I'm curious why this is happening at all.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
因为它的样式是内联块。由于它是内联的，所以空格很重要。使用显示：块；以避免这种情况。
Because it's styled as an inline block. As it's inline, whitespace is significant. Use display:block; to avoid this.