У меня была любопытная проблема, которую я наконец нашел решение, но я не уверен, почему это происходит. У меня есть страница, которая генерируется 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, поэтому она выглядит не так красиво, как эта. В этом и заключается проблема. То, что я разместил выше, отображается нормально и согласованно во всех браузерах. Когда я удаляю пробел перед разделением «корабли», он неправильно выравнивается в 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>
Опять же, легко исправить, но мне любопытно, почему это вообще происходит.