1

この円では、IE9とFirefoxの円の内側にカーソルがある場合にのみポインターが表示されることに気付きました。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と同じように機能させる方法はありますか？

4

1 に答える 1

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以降、およびInternetExplorer6.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>
于 2012-04-13T19:51:23.703 に答える