CSS: неожиданное вертикальное положение элементов "встроенный блок"

Пожалуйста, рассмотрите следующий код HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>test</title>
    <style>
        .section {
            display: inline-block;
            border: 1px dashed blue;
        }
        .outer {
            border: 1px dashed red;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div style="height: 500px; width: 200px;" class="section">a
        <div style="height: 100px;" class="outer">1A<br />1B</div>
    </div>
    <div style="height: 500px; width: 200px;" class="section">b
        <div style="height: 200px;" class="outer">2</div>
        <div style="height: 200px;" class="outer">3<br />4<br />5</div>
    </div>
</body>
</html>

Поскольку оба div с классом ".section" имеют одинаковую высоту и являются встроенными блоками, я бы ожидал, что они будут выровнены по вертикали. Однако первый из этих divs сдвинут вниз, так что текст "1B" выравнивается с текстовой строкой "5" из другого раздела. Добавление или удаление строк в div либо прямо влияет на вертикальное положение моего первого раздела.

Я не вижу логики этого, и я не могу найти ответ в официальной документации CSS3. Тем не менее, это, похоже, не ошибка, так как она идентична в Chrome 8, Safari 5, Opera 9.5 и Firefox 4 бета... не пыталась IE, так как это не ссылка в любом случае.

Я ищу рациональное объяснение этого явления. Конечно, существует несколько обходных решений (например, изменение встроенного блока в встроенную таблицу устраняет проблему, или я могу использовать обычные плавающие блоки и т.д.). Однако я пытаюсь понять это поведение.

Надеюсь, кто-то мудрее меня, кто может это объяснить.

Пример в реальном времени здесь.

Ответ 1