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中查看这个小提琴，并与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>

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

1 个答案: