Question

我有一个奇怪的问题，我终于找到了解决方案，但我不确定它为什么会发生。我有一个由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>

同样，很容易修复，但我很好奇为什么会发生这种情况。

Answer 1

因为它被设计为内联块。因为它是内联的，所以空白是重要的。使用display：block;为了避免这种情况。

空格会改变Chrome中的布局吗？

1 个答案: