В результате показанного вами форматирования (пробельные символы) образуются 3 текстовых узла — первый ребёнок в
body, последний ребёнок и один между блоками. Первые два не влияют на расчёт положения блоков, а вот третий будет учитываться, поскольку находится между строчными элементами.
Вам потребуется обнулить размер шрифта в контейнере, в котором находятся блоки с
display:inline-block. Вернуть размер можно с помощью
rem, для этого не забыв указать размер шрифта в
html (а не по старинке в
body)
Однако, для современных браузеров это не требуется — есть
display:flex. А схему со строчно-блочными элементами, обнулением/возвратом размера шрифта сделать только для старых IE (9 и 8). А если вы намереваетесь и IE7 захватить, то нужно помнить, что в нём
display:inline-block можно установить только для строчных элементов (кто ещё помнит
hasLayout Model?:).
В итоге так (с учётом корректировки
Руслан Абдуллаев относительно фоллбэков для старых крокодилов):
<style>
#container {
display: -webkit-box; /* iOS 6-, Safari 3.1-6 */
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Chrome */
display: flex; /* Opera 12.1, Firefox 20+ */
}
.column {
width: 50%;
}
.content.c1 {
height: 300px;
background: #cf9;
}
.content.c2 {
height: 500px;
background: #c9f;
}
</style>
<!--[if IE]>
<style>
#container {
font-size: 0;
}
.column {
display: inline-block;
vertical-align: top;
font-size: 1rem;
}
</style>
<![endif]-->
...
<div id="container">
<div class="column">
<div class="content c1"></div>
</div>
<div class="column">
<div class="content c2"></div>
</div>
</div>
Часто встречается вариант простановки класса в
html для разных версий IE. Тогда можно оперировать этими классами в общих стилях.
Простой
