单击div with border-radius下的链接

Question

所以我有一个显示在div下的链接。这是一个使用边界半径属性的圆。然而，当我将光标移到这个链接上时，它的行为就像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/

在火狐和IE9中的效果与预期一致。

在Chrome 23、Safari 5和Opera 11.5中的工作原理如上所述。

谢谢你的建议。

Answer 1

点击DIV到底层元素在浏览器中的工作方式不同。Opera需要手动事件转发，火狐和Chrome理解CSS指针事件:无；IE不需要任何透明背景的东西，比如背景:白色；不透明度:0；滤镜:Alpha(opacity=0)；IE需要像Opera一样转发。

请参阅http://caniuse.com/pointer-events上的转发测试。指针事件CSS属性已从CSS3-UI移动到CSS4-UI。