html - 「A」タグ、インラインブロック、負のマージン

Question

この簡単な例を考えてみましょう。

HTML

<div>
    <a href="/">Some link here</a>
    <div>a div here</div>
    <a href="/">Another link</a>
    <br/>
    <a href="/">And one more!</a>
</div>

CSS

div > a, div > div {
    color: white;
    line-height: 1.6;
    height: 30px;
    text-align: center;
    width: 150px;
}
div > a {
    border: 1px solid black;
    display: inline-block;
    text-decoration: none;
}
div >  a:first-child {
    background-color: red;
    margin-bottom: -8px;
}
div > div + a {
    background-color: green;
    margin-bottom: -8px;
}
div > br + a {
    background-color: blue;
}
div > div {
    background-color:black;
    border: 1px solid gray:
    margin-bottom:-8px;
}

ここでフィドルhttp://jsfiddle.net/rHupy/2/

この問題は、最新の Chrome および Firefox に関連しています。

私はこれをいじって昨日の午後全体を失いました。基本的に、この例では、負の下部マージンが非常に奇妙に機能します。赤の A タグにマイナスのマージンを使用すると、DIV タグで描画されますが、最大 8px です。-8px (より負の値) を下回ると、DIV タグは配置されたままになり、赤い A タグにそれ以上描画されません。

DIV タグにマージンを適用すると、期待どおりに機能します。つまり、緑の A タグが -25px の DIV タグを完全に覆うようにすることができます。

ブロック表示スタイルをすべてのタグに適用し、BR タグを省略すれば、この問題は回避されますが、さらに発生するため、これはインライン ブロック表示スタイルに関連していると確信しています。ここの例http://jsfiddle.net/rHupy/3/

また、ブロック表示スタイルとフロート左スタイルを組み合わせてみましたが、さらに問題が発生しました。一部の要素は、互いに整列するのではなく、単に折りたたまれます。

私の質問は: インライン ブロック表示スタイルが「制限付き」に設定されたタグに負のマージンが適用されるのはなぜですか?