Css 如何使应用了边界半径的元素的径向部分在chrome和safari中不可选择？

在这个圆圈中，我注意到指针只有在光标位于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>

div#圆{
宽度：200px；
高度：200px；
-moz边界半径：100px；
-webkit边界半径：100px；
边界半径：100px；
背景：红色；
游标：指针}

看看IE9和Firefox中的这把小提琴，并与Safari和Chrome进行比较。

---

有没有办法让这段代码的功能与IE 9和firefox在chrome和safari中的功能相同？

这可能是因为HTML引擎的工作方式不同。我不知道是什么原因造成的。但是你可以考虑以下的选择：

• 您可以使用
  标记和图像地图。此处对其进行了解释：。演示

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

• 你也可以自己画SVG

---

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

• 您可以使用
  标记和图像地图。此处对其进行了解释：。演示

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

• 你也可以自己画SVG

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