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

Question

在这个圆圈中，我注意到只有当光标在 IE9 和 Firefox 的圆圈内时指针才会出现。然而在 safari 或 chrome 中，如果你在 div 元素内的任何地方，即使你在圆圈之外，光标也是一个指针。

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 中的这个 fiddle ，并与 Safari 和 Chrome 进行比较。 http://jsfiddle.net/GC4yU/

有什么方法可以使这段代码的功能与它在 ie9 和 firefox 中在 chrome 和 safari 中的功能相同吗？

Answer 1

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

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

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

• 您也可以自己绘制 SVG。 jsFiddle here .

<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>