css - box-sizing: border-box はサファリで少し風変わりですか?

Question

このコード:

<div class="green">
    <div class="red" style="height: 25%"></div> * 4
</div>

.red {
    border-top: 1px solid black;
    box-sizing: border-box;
}

...IE8、Chrome 24、Firefox 18 では正常に表示されます。

しかし、Safari (5.1.7) では、余分な不要な下マージン/透明な境界線が表示されます。

jsbin の完全なテスト コード: http://jsbin.com/ozefar/6/edit

私のcssに何か不足していますか？