4

テスト<div>として を円として表示させてみました。には<div>テキストが含まれていますが、それ以外は空です。

次に、JavaScript で と を計算しoffsetWidth、offsetHeight2 つの最大値を使用して、という名前の変数に割り当てますdiameter(ただし、現実的には、幅は常により大きくなります)。幅、高さ、borderRadiusdiameterを割り当てるために使用します。<div>結果は、円のように見えます (少なくとも Chrome、Firefox、Opera、および Safari では。IE はテストしていません)。

Chrome、Firefox、Opera、および Safari でのテストでは、カーソルが円の領域のすぐ外側にあり、設定されていない場合に表示される長方形の領域の内側にある場合、 CSShoverと JavaScriptの動作が異なることに気付きました。onmousedownborder-radius

カーソルがその場所にあるときの結果は次のとおりです。

  • Chrome:hoverおよびonmousedown円の外側で影響を受ける
  • Firefox:円内のみ影響をhover受けるonmousedown
  • Opera:hoverおよびonmousedown影響を受けるサークル外
  • Safari:hoverおよびonmousedown円の外側で影響を受ける

Firefox の動作は、一貫して使用したいものです。これを可能にする方法はありますか?

編集：解決策が見つかった場合は、使用しているブラウザを説明してください。

4

2 に答える 2

2

この問題は、Chrome 30 Canary で既に修正されているようです。そのため、Chrome と Opera (最近 Chrome のレンダリング エンジンに切り替えられた) の今後のリリースは、Firefox と同じように動作するはずです。IE10 はすでにこのように動作しています。

于 2013-06-30T17:57:04.390 に答える
0

ユーザーが使用しているブラウザに応じて特定の css タイプを設定できるように、css ハックを使用してみましたか。解説しているサイトは以下です。

http://www.paulirish.com/2009/browser-specific-css-hacks/

ここにない場合は、円のフィドルです:

http://jsfiddle.net/rPtAV/6/

使用したcssは次のとおりです。

.circle {
    padding: 20px;
    background: red;
    width: 20px;
    border-radius: 20000px;
    height: 20px;
}
于 2013-06-30T08:56:27.817 に答える