css - 如何使应用了边框半径的元素的径向部分在 chrome 和 safari 中无法选择？

Question

在这个圈子中，我注意到只有当光标在 IE9 和 firefox 的圈子内时才会出现指针。div但是，在 safari 或 chrome 中，如果您位于元素内部的任何位置，即使您在圆圈之外，光标也是一个指针。

div#circle {
   width: 200px;
   height: 200px;
   -moz-border-radius:100px;
   -webkit-border-radius:100px;
   border-radius:100px;
   background: red;
   cursor:pointer }

<div id = "circle"></div>

看看 IE9 和 Firefox 中的这个小提琴，并与 Safari 和 Chrome 进行比较。 http://jsfiddle.net/GC4yU/

有什么方法可以使此代码的功能与 ie9 和 chrome 和 safari 中的 firefox 相同？

Answer 1

差异可能是由于 HTML 引擎的工作方式。我不知道是什么原因造成的。但您可以考虑以下替代方案：

• 您可以使用<img>标签并使用图像映射。它在这里解释：http: //www.w3schools.com/tags/tag_area.asp。演示在这里。

• 您可以使用raphaelJS 库来生成 SVG。Raphaël 目前支持 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+。

• 您也可以自己绘制 SVG。jsFiddle 在这里。

<svg  xmlns="http://www.w3.org/2000/svg" version="1.1">
       <circle style="cursor:pointer" cx="100" cy="50" r="40" 
               stroke="black" stroke-width="2" fill="red" />
</svg>