click - border-radius の div の下のリンクをクリックします

Question

divの下に表示されるリンクがあります。これは、border-radius プロパティを使用した円です。ただし、このリンクの上にカーソルを移動すると、div がまだ正方形であり、クリックできないように動作します。

JavaScript のクリック イベントをリッスンし、これを行うためにいくつかの計算を行うことができますが、私にはわからない別の方法があることを願っています。

a {
    display: block;
    width: 600px;
    height: 150px;
    background: yellow;
}

a:hover {
    color: yellow;
    background: blue;
}

div {
    width: 250px;
    height: 250px;
    margin-top: -100px;
    overflow: hidden;
    background: red;
    border-radius: 125px;
}

デモ: http://jsfiddle.net/D4R9C/1/

Firefox および IE9 では期待どおりに動作します。
Chrome 23、Safari 5、および Opera 11.5 で上記のように動作します。

アドバイスをありがとう。